-
[AngularJS] 9. 필터(Filter) 사용 - AngularJS 강좌Web/AngularJS 2016. 4. 8. 13:16
필터(Filter) 사용
AJS 필터는 크게 두 가지 용도로 사용됩니다.
첫번째로 데이터를 보이는 폼을 바꾸는 데 사용됩니다.
두번째로 여러 데이터 중 조건에 맞는 데이터만 보여줄 때 사용됩니다.
즉, 포맷팅(Formatting)과 필터링(Filtering)하는데 사용된다고 볼 수 있습니다.
1. AngularJS에서 제공하는 필터
아래는 AJS에서 제공하는 필터와 그에 대한 설명입니다.
[출처: AngularJS]
그럼 예제를 통해서 포맷팅 필터를 살펴보도록 합시다.
* ajsFilter.html
12345678910111213141516171819202122232425262728293031323334353637<!doctype html><html ng-app="filterExam"><head><meta charset="UTF-8"/><script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script><script type="text/javascript">angular.module('filterExam', []).controller('mainCtrl', ['$scope', function($scope) {$scope.cValue = 19900;$scope.dNow = new Date();$scope.jObj = {name: 'Palpit'};$scope.lString = 'Palpit Moon';$scope.nValue = 10 / 3;}]);</script></head><body><div ng-controller="mainCtrl"><h1>필터 적용 예제</h1><h2>Currency 필터</h2><p> Before: {{cValue}}</p><p> After: {{cValue | currency}}</p><h2>date 필터</h2><p> Before: {{dNow}}</p><p> After: {{dNow | date:'yyyy년 mm월 dd일'}}</p><h2>JSON 필터</h2><p> Before: {{jObj}}</p><p> After: {{jObj | json}}</p><h2>lowercase 필터</h2><p> Before: {{lString}}</p><p> After: {{lString | lowercase}}</p><h2>number 필터</h2><p> Before: {{nValue}}</p><p> After: {{nValue | number:5}}</p></div></body></html>cs 각 필터가 주어진 데이터를 포맷팅하여 화면에 출력합니다.
다음은 필터를 이용해 여러 데이터를 필터링하여 보여주는 filter, limitTo, orderBy 필터 예제를 보도록 합시다.
* ajsFilter2.html
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253<!doctype html><html ng-app="filterExam"><head><meta charset="UTF-8"/><script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script><script type="text/javascript">angular.module('filterExam', []).controller('mainCtrl', ['$scope', function($scope) {$scope.userList = [{userId: 'pal', userName: 'Jolie', userEmail: 'pal@ajs.com'},{userId: 'jake', userName: 'Anthem', userEmail: 'jake@ajs.com'},{userId: 'paul', userName: 'Paul', userEmail: 'paul@ajs.com'},{userId: 'kino', userName: 'Kino', userEmail: 'kino@ajs.com'},{userId: 'ash', userName: 'Ashey', userEmail: 'ash@ajs.com'},{userId: 'xeo', userName: 'XeoroX', userEmail: 'xeo@ajs.com'},];}]);</script></head><body><div ng-controller="mainCtrl"><h1> 필터 사용 예제 </h1><div>사용자 이름: <input type="text" ng-model="search.userName"></div><ul><li ng-repeat="user in userList | filter: search"><p>{{user.userId}} | {{user.userName}} | {{user.userEmail}}</p></li></ul><h1> limitTo 예제 </h1><div>제한 개수: <input type="number" ng-model="limitNum"></div><ul><li ng-repeat="user in userList | limitTo: limitNum"><p>{{user.userId}} | {{user.userName}} | {{user.userEmail}}</p></li></ul><h1> orderBy 예제 </h1><div>정렬 순서:아이디 <input type="radio" ng-model="order" value="userId">이름 <input type="radio" ng-model="order" value="userName"><br/>역순 여부:<input type="checkbox" ng-model="reverse"></div><ul><li ng-repeat="user in userList | orderBy:order:reverse"><p>{{user.userId}} | {{user.userName}} | {{user.userEmail}}</p></li></ul></div></body></html>cs 위 두 예제에서는 모두 템플릿에서 필터를 사용했습니다. 하지만 템플릿이 아닌 컨트롤러나 서비스, 지시자에서도 필터를 사용할 수 있습니다.
필터를 템플릿 외에 자바스크립트에서 사용하려면 $filter 서비스를 이용해야 합니다.
* ajsFilter3.html
12345678910111213141516171819202122232425262728293031323334353637383940414243<!doctype html><html ng-app="filterExam"><head><meta charset="UTF-8"/><script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script><script type="text/javascript">angular.module('filterExam', []).controller('mainCtrl', ['$scope', '$filter', function($scope, $filter) {var userList = [{userId: 'pal', userName: 'Jolie', userEmail: 'pal@ajs.com'},{userId: 'jake', userName: 'Anthem', userEmail: 'jake@ajs.com'},{userId: 'paul', userName: 'Paul', userEmail: 'paul@ajs.com'},{userId: 'kino', userName: 'Kino', userEmail: 'kino@ajs.com'},{userId: 'ash', userName: 'Ashey', userEmail: 'ash@ajs.com'},{userId: 'xeo', userName: 'XeoroX', userEmail: 'xeo@ajs.com'},];$scope.value = new Date();$scope.dateFormatedValue = $filter('date')($scope.value, 'yyyy-mm-dd');$scope.userList = userList;$scope.filter = function(filterObj) {$scope.userList = $filter('filter')(userList, filterObj);};}]);</script></head><body><div ng-controller="mainCtrl"><p> 필터 사용 전 날짜 데이터: {{value}} </p><p> date 필터 사용: {{dateFormatedValue}} </p><hr><div>사용자 이름: <input type="text" ng-model="search.userName"><button ng-click="filter(search)">필터 처리</button></div><ul><li ng-repeat="user in userList"><p>{{user.userId}} | {{user.userName}} | {{user.userEmail}}</p></li></ul></div></body></html>cs mainCtrl 함수에서 $filter 서비스를 주입받는 것을 볼 수 있습니다. 이 $filter 서비스에서 사용하고자 하는 필터 이름을 인자로 주고 함수를 호출하면 해당 필터 함수를 가지고 올 수 있습니다. AJS는 $filter 서비르를 이용해 등록된 필터 함수를 얻을 수 있고 이렇게 얻은 필터 함수를 이용해 특정 데이터를 포맷하거나 필터 처리 할 수 있습니다.
2. 필터 만들기
AJS는 다양한 내장 필터를 제공하지만, 원하는 필터 개발도 가능합니다. 개발을 하기 위해서는 $filterProvider를 사용하면 됩니다.
$filterProvider에서 register 메서드를 이용해 사용자 정의 필터를 등록할 수 있습니다.
그럼 예제를 통해 $filterProvider의 register 메서드 사용법을 알아보도록 합시다.
* ajsFilter4.html
12345678910111213141516171819202122232425<!doctype html><html ng-app="filterExam"><head><meta charset="UTF-8"/><script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script><script type="text/javascript">angular.module('filterExam', []).config(function($filterProvider) {$filterProvider.register('capitalize', function() {return function(text) {return text.charAt(0).toUpperCase() + text.slice(1);};});}).controller('mainCtrl', ['$scope', function($scope) {$scope.text = "temp";}]);</script></head><body><div ng-controller="mainCtrl"><p>{{text | capitalize}}</p></div></body></html>cs end
* 이 포스팅은 '시작하세요! AngularJS 프로그래밍'을 바탕으로 작성하였습니다.
'Web > AngularJS' 카테고리의 다른 글
[AngularJS] 8. 의존관계 주입과 서비스 - AngularJS 강좌 (0) 2016.04.08 [AngularJS] 7-2. 지시자(Directive) 응용 - AngularJS 강좌 (0) 2016.04.05 [AngularJS] 7-1. 지시자(Directive) 기본 - AngularJS 강좌 (0) 2016.04.04 [AngularJS] 6. 모듈(Module) - AngularJS 강좌 (0) 2016.04.01 [AngularJS] 5. MVC - 모델, 뷰, 컨트롤러 - AngularJS 강좌 (0) 2016.04.01 [AngularJS] 4. 템플릿 시스템과 데이터 바인딩 - 2 - AngularJS 강좌 (0) 2016.02.06
