[angularJS] 필터

필터는 배열의 데이터와 함께 사용한다. 또한, 루프 밖에서 사용이 가능하다.

특정 조건에 만족하는 데이터만 구하고 싶을 때 사용. (예를 들어 <input>에 입력된 값으로만 사용자를 구하고 싶을 때)

전역으로 선언

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

myApp.filter('reverse', function () {     return function (input, uppercase) {         var out = '';         for (var i = 0; i < input.length; i++) {             out = input.charAt(i) + out;         }         if (uppercase) {             out = out.toUpperCase();         }         return out;     } });   // 데이터를 제공하는 컨트롤러 myApp.controller('MainCtrl', ['$scope', function ($scope) {     $scope.greeting = 'Todd Motto'; }]);

- filter를 전역으로 선언. 

?

1 2 3 4 5 6

<div ng-app="myApp">     <div ng-controller="MainCtrl">         <p>No filter: {{ greeting }}</p>         <p>Reverse: {{ greeting | reverse }}</p>     </div> </div>

- {}안에서 filter('reverse',function()~~~)를 불러오려면 { | reverse} 이렇게 써준다.

컨트롤러 내에서 선언

?

1 2 3 4 5 6 7 8 9 10 11 12

myApp.controller('MainCtrl', ['$scope', function ($scope) {           $scope.numbers = [10, 25, 35, 45, 60, 80, 100];           $scope.lowerBound = 42;           // 필터가 되어줘     $scope.greaterThanNum = function (item) {         return item > $scope.lowerBound;     };       }]);

- filter를 컨트롤러 내에 선언.

?

1 2 3

<li ng-repeat="number in numbers | filter:greaterThanNum">   {{ number }} </li>

- numbers라는 배열에 데이터를 넣어줬으니까 number in numbers로 선언해주고 {{ number }}라고 이름을 같게 써준다.

- 컨트롤러 내에서 필터를 사용하면 { | filter:xxxx} 이렇게 xxxx자리에 필터함수의 이름을 넣어준다.

* 출처 : http://soomong.net/blog/2014/01/20/translation-ultimate-guide-to-learning-angularjs-in-one-day/