[angularJS] 필터

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

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

전역으로 선언

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를 전역으로 선언. 

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

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

컨트롤러 내에서 선언

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를 컨트롤러 내에 선언.

<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/