Notice
Recent Posts
Recent Comments
Link
«   2024/11   »
일 월 화 수 목 금 토
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
Tags more
Archives
Today
Total
관리 메뉴

nalaolla

[AngularJS] 9. 필터(Filter) 사용 - AngularJS 강좌 본문

AngularJS_2

[AngularJS] 9. 필터(Filter) 사용 - AngularJS 강좌

날아올라↗↗ 2016. 6. 14. 14:07
728x90
반응형

필터(Filter) 사용

 AJS 필터는 크게 두 가지 용도로 사용됩니다.


 첫번째로 데이터를 보이는 폼을 바꾸는 데 사용됩니다.


 두번째로 여러 데이터 중 조건에 맞는 데이터만 보여줄 때 사용됩니다.


 즉, 포맷팅(Formatting)과 필터링(Filtering)하는데 사용된다고 볼 수 있습니다.




 1. AngularJS에서 제공하는 필터

  아래는 AJS에서 제공하는 필터와 그에 대한 설명입니다.





[출처: AngularJS]




  그럼 예제를 통해서 포맷팅 필터를 살펴보도록 합시다.


 * ajsFilter.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!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


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<!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


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!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


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!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







 

* 이 포스팅은 '시작하세요! AngularJS 프로그래밍'을 바탕으로 작성하였습니다.

728x90
반응형
저작자표시

'AngularJS_2' 카테고리의 다른 글

[AngularJS] 8. 의존관계 주입과 서비스 - AngularJS 강좌  (0) 2016.06.14
[AngularJS] 7-2. 지시자(Directive) 응용 - AngularJS 강좌  (0) 2016.06.14
[AngularJS] 7-1. 지시자(Directive) 기본 - AngularJS 강좌  (0) 2016.06.14
[AngularJS] 6. 모듈(Module) - AngularJS 강좌  (0) 2016.06.14
[AngularJS] 5. MVC - 모델, 뷰, 컨트롤러 - AngularJS 강좌  (0) 2016.06.14
'AngularJS_2' Related Articles more