여러 인수를 사용하여 Angular.js 필터를 어떻게 호출합니까?


297

로부터으로 문서 , 우리는 다음과 같은 필터를 호출 할 수있는 이 같은 :

{{ myDateInScope | date: 'yyyy-MM-dd' }}

여기서 날짜는 하나의 인수를 취하는 필터입니다.

템플릿과 JavaScript 코드 모두에서 더 많은 매개 변수를 가진 필터를 호출하는 구문은 무엇입니까?

답변:


621

템플리트에서 필터 인수를 콜론으로 구분할 수 있습니다 .

{{ yourExpression | yourFilter: arg1:arg2:... }}

자바 스크립트에서

$filter('yourFilter')(yourExpression, arg1, arg2, ...)

orderBy 필터 문서 에 실제로 숨겨진 예제가 있습니다 .


예:

정규식으로 바꿀 수있는 필터를 만든다고 가정 해 봅시다.

myApp.filter("regexReplace", function() { // register new filter

  return function(input, searchRegex, replaceRegex) { // filter arguments

    return input.replace(RegExp(searchRegex), replaceRegex); // implementation

  };
});

모든 숫자를 검열하기 위해 템플리트에서 호출 :

<p>{{ myText | regexReplace: '[0-9]':'X' }}</p>

4
HTML 템플리트 바인딩에서 {{filter_expression | filter : expression : comparator}}, JavaScript에서 $ filter ( 'filter') (filter_expression, expression, comparator)
Roman Sklyarov

@pulkitsinghal 무슨 뜻인가요? JSFiddle 또는 Plunker에서 문제가있는 코드를 보여주십시오.
Roman Sklyarov 2016 년

방금 자바 스크립트로 필터를 게시했다면 좋을 것입니다.
Obi

1
@ObiOnuorah OK, Coffeescript를 Javascript로 번역했습니다.
nh2

1
좋은 물건. 이 답변이 목록 상단에없는 이유는 무엇입니까?
thethakuri

11

나는 아래에서 내가 커스텀 필터를 언급 한 곳에서 두 개의 매개 변수가있는이 필터를 호출하는 방법을 언급했다.

countryApp.filter('reverse', function() {
    return function(input, uppercase) {
        var out = '';
        for (var i = 0; i < input.length; i++) {
            out = input.charAt(i) + out;
        }
        if (uppercase) {
            out = out.toUpperCase();
        }
        return out;
    }
});

템플릿을 사용하는 html에서 아래와 같이 해당 필터를 호출 할 수 있습니다

<h1>{{inputString| reverse:true }}</h1>

여기서 보시면 첫 번째 매개 변수는 inputString이고 두 번째 매개 변수는 true입니다.


4

ng-options 내에서 필터를 호출하려는 경우 코드는 다음과 같습니다.

ng-options="productSize as ( productSize | sizeWithPrice: product )  for productSize in productSizes track by productSize.id"

여기서 필터는 sizeWithPriceFilter이며 product 및 productSize의 두 매개 변수가 있습니다.




-1

이 코드에서 jsondata는 배열이며 함수 반환에서 jsondata에 존재하는 'version'을 확인합니다.

var as = $filter('filter')(jsondata, function (n,jsondata){
   return n.filter.version==='V.0.3'
});

console.log("name is " + as[0].name+as[0]); 
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.