Angularjs_AngularJS에서 필터 사용에 대한 자세한 설명

Filter의 기능은 입력을 받아 특정 규칙에 따라 처리한 후 처리된 결과를 사용자에게 반환하는 것입니다. 필터는 템플릿, 컨트롤러 또는 서비스에서 사용할 수 있으며 필터를 사용자 정의하는 것도 쉽습니다.

템플릿에서 필터 사용

다음 구문 표현식을 사용하여 뷰 템플릿에서 필터를 사용할 수 있습니다.

{{ 표현식 필터 }}

예: {{ 12 | 통화 }} 형식은 통화 필터 사용을 사용하여 숫자 12를 통화 형식으로 필터링하고 결과는 $12.00입니다.

다른 필터의 결과에 필터를 적용할 수 있습니다. 이를 "체인"이라고 하며 다음 구문과 함께 사용됩니다.

{{ 표현식 | 필터1 | 필터2 ... }}

필터에는 매개변수가 필요할 수 있습니다. 구문은 다음과 같습니다.

{{ 표현식 | 필터:인수1:인수2:... }}

예: {{ 1234 | number:2 }} 형식은 숫자 1234를 소수점 두 자리 숫자로 필터링하기 위해 숫자 필터 사용을 사용합니다. 결과는 1,234.00입니다.

컨트롤러, 서비스, 지시어에 필터 사용

컨트롤러, 서비스 및 지시문에서 필터를 사용할 수 있습니다.

이렇게 하려면 컨트롤러/서비스/지시문에 종속성 이름을 삽입해야 합니다. 예를 들어 필터가 숫자인 경우 종속성을 사용하여 numberFilter를 삽입해야 합니다. 주입된 매개변수는 값을 첫 번째 매개변수로 취하고 두 번째 매개변수를 사용하여 매개변수를 필터링하는 함수입니다.

다음 예에서는 필터라는 필터를 사용합니다. 이 필터는 하위 배열을 기반으로 배열을 줄일 수 있습니다. 또한 'a'에 대한 전체 텍스트 검색을 수행하는 {{ctrl.array|filter:'a'}}와 같은 마크업을 뷰 템플릿에 적용할 수도 있습니다. 그러나 뷰 템플릿에서 필터를 사용하면 각 필터가 다시 필터링되며 배열이 비교적 큰 경우 여러 번 로드됩니다.

따라서 다음 예에서는 컨트롤러에서 필터를 직접 호출합니다. 이를 통해 컨트롤러는 필요할 때(예: 백엔드 데이터가 로드되거나 필터 표현식이 변경될 때) 필터를 호출할 수 있습니다.

index.html:

<div ng-controller="FilterController as ctrl">
 <div>
  All entries:
  <span ng-repeat="entry in ctrl.array">{{entry.name}} </span>
 </div>
 <div>
  Entries that contain an "a":
  <span ng-repeat="entry in ctrl.filteredArray">{{entry.name}} </span>
 </div>
</div>
 

script.js:

angular.module('FilterInControllerModule', []).
controller('FilterController', ['filterFilter', function(filterFilter) {
 this.array = [
  {name: 'Tobias'},
  {name: 'Jeff'},
  {name: 'Brian'},
  {name: 'Igor'},
  {name: 'James'},
  {name: 'Brad'}
 ];
 this.filteredArray = filterFilter(this.array, 'a');
}]);

결과는 다음과 같습니다.

All entries: Tobias Jeff Brian Igor James Brad
Entries that contain an "a": Tobias Brian James Brad

맞춤 필터 만들기:

자신만의 필터를 작성하는 것은 매우 간단합니다. 모듈에 새 필터 팩토리 함수를 등록하기만 하면 됩니다. 내부적으로 여기에서는 filterProvider가 사용됩니다. 이 팩토리 함수는 입력 값을 첫 번째 인수로 사용하여 새 필터 함수를 반환해야 합니다. 모든 필터 매개변수는 필터 함수에 추가 매개변수로 전달됩니다.

이 필터 기능은 단순한 기능이어야 합니다. 이는 상태가 없고 멱등성이 있어야 함을 의미합니다. 입력 함수가 변경되면 Angular는 이러한 속성에 의존하여 필터를 실행합니다.

참고: 필터 이름은 유효한 각도 표현식 식별자여야 합니다. 예를 들어 대문자 또는 orderBy입니다. 이름에는 하이픈, 마침표 등 특수문자는 허용되지 않습니다. 필터를 네임스페이스화하려면 대문자(myappSubsectionFilterx) 또는 밑줄(myapp_subsection_filterx)을 사용할 수 있습니다.

다음 예제 필터는 문자열을 반대로 바꿉니다. 또한 문자열을 대문자로 만드는 조건을 추가할 수도 있습니다.

index.html

<div ng-controller="MyController">
 <input ng-model="greeting" type="text"><br>
 No filter: {{greeting}}<br>
 Reverse: {{greeting|reverse}}<br>
 Reverse + uppercase: {{greeting|reverse:true}}<br>
 Reverse, filtered in controller: {{filteredGreeting}}<br>
</div>
 

script.js

angular.module('myReverseFilterApp', [])
.filter('reverse', function() {
 return function(input, uppercase) {
  input = input || '';
  var out = "";
  for (var i = 0; i < input.length; i++) {
   out = input.charAt(i) + out;
  }
  // conditional based on optional argument
  if (uppercase) {
   out = out.toUpperCase();
  }
  return out;
 };
})
.controller('MyController', ['$scope', 'reverseFilter', function($scope, reverseFilter) {
 $scope.greeting = 'hello';
 $scope.filteredGreeting = reverseFilter($scope.greeting);
}]);

결과는 다음과 같습니다.

No filter: hello
Reverse: olleh
Reverse + uppercase: OLLEH
Reverse, filtered in controller: olleh

상태 저장 필터

상태 저장 필터는 Angular로 최적화할 수 없으므로 종종 성능 문제가 발생하므로 작성하는 것이 좋습니다. 많은 상태 저장 필터는 숨겨진 상태를 모델로 노출하고 이를 필터 매개변수로 변환하는 것만으로 상태 비저장 필터로 변환됩니다.

그러나 상태 저장 필터를 작성해야 하는 경우 필터를 $stateful로 표시해야 합니다. 즉, 각 $digest 주기 동안 한 번 이상 실행됩니다.

색인,html

<div ng-controller="MyController">
 Input: <input ng-model="greeting" type="text"><br>
 Decoration: <input ng-model="decoration.symbol" type="text"><br>
 No filter: {{greeting}}<br>
 Decorated: {{greeting | decorate}}<br>
</div>
 

script.js:

angular.module('myStatefulFilterApp', [])
.filter('decorate', ['decoration', function(decoration) {

 function decorateFilter(input) {
  return decoration.symbol + input + decoration.symbol;
 }
 decorateFilter.$stateful = true;

 return decorateFilter;
}])
.controller('MyController', ['$scope', 'decoration', function($scope, decoration) {
 $scope.greeting = 'hello';
 $scope.decoration = decoration;
}])
.value('decoration', {symbol: '*'});

결과는 다음과 같습니다.

No filter: hello
Decorated: *hello*

다음번에는 Anglejs에서 필터의 일반적인 사용법에 대한 글을 쓰겠습니다.