본문 바로가기
Web/AngularJs

[AngularJS 시작-3] JAVASCRIPT FRAMEWORK / Filters

by 나비와꽃기린 2016. 10. 7.

3.8 예제(8) _ Filters 추가


1. uppercase, lowercase 대소문자 변환

필터 파이프 문자를 사용하여 식에 더해 줄 수 있다.

<div ng-app="myApp" ng-controller="personCtrl"> <p>The name is {{ lastName | uppercase }}</p> </div>

2. orderBy 데이터 정렬

<div ng-app="myApp" ng-controller="namesCtrl"> <p>Looping with objects:</p> <ul> <li ng-repeat="x in names | orderBy:'country'"> {{ x.name + ', ' + x.country }} </li> </ul> </div> <script> angular.module('myApp', []).controller('namesCtrl', function($scope) { $scope.names = [ {name:'Jani',country:'Norway'}, {name:'Carl',country:'Sweden'}, {name:'Margareth',country:'England'}, {name:'Hege',country:'Norway'}, {name:'Joe',country:'Denmark'}, {name:'Gustav',country:'Sweden'}, {name:'Birgit',country:'Denmark'}, {name:'Mary',country:'England'}, {name:'Kai',country:'Norway'} ]; }); </script>

<<결과>>

Looping with objects:

  • Joe, Denmark
  • Birgit, Denmark
  • Margareth, England
  • Mary, England
  • Jani, Norway
  • Hege, Norway
  • Kai, Norway
  • Carl, Sweden
  • Gustav, Sweden

3. filter 특정 문자가 들어간 데이터 추출

‘i’  속한 데이터만 추출해준다.

<div ng-app="myApp" ng-controller="namesCtrl">
<ul>
  <li ng-repeat="x in names | filter : 'i'">
    {{ x }}
  </li>
</ul>
</div>

<script>
angular.module('myApp', []).controller('namesCtrl', function($scope) {
    $scope.names = [
        'Jani','Carl','Margareth','Hege','Joe','Gustav','Birgit','Mary','Kai'
    ];
});
</script>

4. test

인풋박스(입력필드)에 ng-model 지시자를 설정함으로써 입력필드의 값이 필터 되어 매칭되는 값만 추출된다.

<div ng-app="myApp" ng-controller="namesCtrl"> <p>Type a letter in the input field:</p> <p><input type="text" ng-model="test"></p> <ul> <li ng-repeat="x in names | filter:test"> {{ x }} </li> </ul> </div> <script> angular.module('myApp', []).controller('namesCtrl', function($scope) { $scope.names = ['Jani','Carl','Margareth','Hege','Joe','Gustav','Birgit','Mary','Kai']; }); </script>



댓글0