AngularJS
맞춤 필터

간단한 필터 예제

필터는 사용자에게 표시 할 표현식의 값을 형식화합니다. 뷰 템플릿, 컨트롤러 또는 서비스에서 사용할 수 있습니다. 이 예제는 필터 ( addZ )를 생성 한 다음 뷰에서 사용합니다. 이 필터가 수행하는 모든 작업은 문자열의 끝에 대문자 'Z'를 추가합니다.

example.js

angular.module('main', [])
    .filter('addZ', function() {
            return function(value) {
                return value + "Z";
            }
     })
    .controller('MyController', ['$scope', function($scope) {
        $scope.sample = "hello";
    }])

example.html

뷰 내부에서 필터는 다음 구문과 함께 적용됩니다. { variable | filter} . 이 경우 컨트롤러에서 정의한 변수 sample 이 우리가 만든 필터 addZ 로 필터링됩니다.

<div ng-controller="MyController">
   <span>{{sample | addZ}}</span>
</div>

예상 결과

helloZ

컨트롤러, 서비스 또는 필터에서 필터 사용

$filter 를 주입해야합니다 :

angular
  .module('filters', [])
  .filter('percentage', function($filter) {
    return function (input) {
      return $filter('number')(input * 100) + ' %';
    };
  });

매개 변수가있는 필터 만들기

기본적으로 필터에는 적용되는 변수 인 단일 매개 변수가 있습니다. 그러나 함수에 더 많은 매개 변수를 전달할 수 있습니다.

angular
  .module('app', [])
  .controller('MyController', function($scope) {
    $scope.example = 0.098152;
  })
  .filter('percentage', function($filter) {
    return function (input, decimals) {
      return $filter('number')(input * 100, decimals) + ' %';
    };
  });

이제 percentage 필터에 정밀도를 부여 할 수 있습니다.

<span ng-controller="MyController">{{ example | percentage: 2 }}</span>
=> "9.81 %"

...하지만 다른 매개 변수는 선택 사항이지만 여전히 기본 필터를 사용할 수 있습니다.

<span ng-controller="MyController">{{ example | percentage }}</span>
=> "9.8152 %"