[AngularJS 시작-3] JAVASCRIPT FRAMEWORK / Filters

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>