ProAngularJS Ch14. 필터 활용

* 실행 결과
http://study.jeju.onl/filters.html

14장에서는 필터에 대해 설명한다.
굳이 필터를 사용하는 이유는 원본 데이터를 건드리지 않고
애플리케이션의 독립성과 테스트성을 좋게 하기 위해서이다.

* 필터의 사용 이유
필터는 뷰에서 보여주려는 애플리케이션의 데이터에 공통으로 적용할 수 있는 변형 로직을 담는다.

* 필터의 시점
필터는 디렉티브에서 데이터를 처리하고 뷰에서 데이터를 보여주기 전에 데이터를 포매팅한다.

* 지역화 파일
angular 다운로드에서 하위 디렉토리 i18n 을 보면
지역별 js 파일이 있다. 해당 locale의 포매팅을 정의한다.
태그로 로드한다.

주요 내요은 다음과 같다.

  • 단일 데이터 값 필터링: 내장 필터들
    – 통화 값 포매팅, 다른 숫자값 포매팅: currency
    – 날짜 포매팅: date
    – 문자열 대소문자 변경: uppercase/lowercase
    – JSON 생성: json
    – 필터 결과 지역화: locale별 js 파일 적용시
  • 컬렉션 필터링
    – 항목 개수 제한: limitTo
    – 항목 선택: filter:{키: 값}
    – 항목 정렬: orderBy, 정렬 방향, 함수를 통한 정렬
    – 다중 서술식을 활용한 정렬
  • 필터 체인
  • 커스텀 필터 구현
    – 데이터 값을 포매팅하는 필터 구현
    – 컬렉션 필터 구현
    – 기존 필터 확장

다음은 이에 대한 소스 파일이다.

1) filters.html



  Filters - ProAngularJS
  
  

  
  /node_modules/angular/angular-route.js

  <!-- currency 필터에 영향을 준다: 적용된 통화는 프랑스의 루블화 -->
  /node_modules/angular/i18n/angular-locale_fr-fr.js
  

    angular.module("exampleApp", [])
      .controller("defaultCtrl", function($scope) {

        $scope.products = [
          { name: "Apples", category: "Fruit", price: 1.20, expiry: 10 },
          { name: "Bananas", category: "Fruit", price: 2.42, expiry: 7 },
          { name: "Pears", category: "Fruit", price: 2.02, expiry: 6 },

          { name: "Tuna", category: "Fish", price: 20.45, expiry: 3 },
          { name: "Salmon", category: "Fish", price: 17.93, expiry: 2 },
          { name: "Trout", category: "Fish", price: 12.93, expiry: 4 },

          { name: "Beer", category: "Drink", price: 2.99, expiry: 365 },
          { name: "Wine", category: "Drink", price: 8.99, expiry: 365 },
          { name: "Whiskey", category: "Drink", price: 45.99, expiry: 365 }
        ];

        $scope.getExpiryDate = function( days ) {
          var now = new Date();
          return now.setDate( now.getDate()+days );
        };

        $scope.limitVal = "5";
        $scope.limitRange = [];
        for( var i=(0-$scope.products.length); i
  http://customFilters.js

  <style type="text/css">
  </style>
</head>
<body ng-controller="defaultCtrl">
  

Products {{ products.length }}

Limit:
** limitTo: 테이블 행 크기 제한하여 출력 ** orderBy: 출력 아이템을 정렬한다. ('-' 붙이면 역정렬) ** 배열을 이용하여 다중 정렬도 가능하다 ** 필터 체인: 여러개의 필터를 연결하여 사용 가능하다 ** 사용자 정의 필터 --> {{ p.price | currency:"₤" }} --> {{ p.price | number: 0 }} --> -->
Name Category Expiry Price
{{ p.name | labelCase }} {{ p.category | labelCase:true }} {{ getExpiryDate(p.expiry) | date:"yyyy-MM-dd"}}{{ p.price | currency }}
{{ p | json }}
</div> </body> </html>

2) customFilters.js

angular.module("exampleApp")
  .filter("labelCase", function() {

    return function( value, reverse) {
      if( angular.isString(value)) {
        var intermediate = reverse ? value.toUpperCase() : value.toLowerCase();
        return (reverse ? 
              intermediate[0].toLowerCase() : intermediate[0].toUpperCase())
            + intermediate.substr(1);
      } else {
        return value;				
      }
    };

  })
  .filter("skip", function() {

    return function( data, count) {
      if ( angular.isArray(data) && angular.isNumber(count)) {
        if ( count > data.length || count < 1) {
          return data;
        } else {
          return data.slice(count);
        }
      } else {
        return data;
      }
    };

  })
  // skip 필터의 결과를 받아서 limitTo 필터로 연결시킨다
  // 다중 필터의 복합 작업을 하나의 필터함수에서 처리하도록 할 수 있다
  .filter("take", function($filter) {

    return function( data, skipCount, takeCount) {
      var skippedData = $filter("skip")(data, skipCount);
      return $filter("limitTo")(skippedData, takeCount);
    };

  });

 

답글 남기기

아래 항목을 채우거나 오른쪽 아이콘 중 하나를 클릭하여 로그 인 하세요:

WordPress.com 로고

WordPress.com의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Twitter 사진

Twitter의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Facebook 사진

Facebook의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Google+ photo

Google+의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

%s에 연결하는 중

%d 블로거가 이것을 좋아합니다: