반응형
여러 인수를 사용하여 Angular.js 필터를 어떻게 호출합니까?
로부터으로 문서 , 우리는 다음과 같은 필터를 호출 할 수있는 일 이 같은 :
{{ myDateInScope | date: 'yyyy-MM-dd' }}
여기서 날짜는 하나의 인수를 취하는 필터입니다.
템플릿과 JavaScript 코드 모두에서 더 많은 매개 변수를 가진 필터를 호출하는 구문은 무엇입니까?
템플리트에서 필터 인수를 콜론으로 구분할 수 있습니다 .
{{ 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>
나는 아래에서 내가 커스텀 필터를 언급 한 곳에서 두 개의 매개 변수가있는이 필터를 호출하는 방법을 언급했다.
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입니다.
ng-options 내에서 필터를 호출하려는 경우 코드는 다음과 같습니다.
ng-options="productSize as ( productSize | sizeWithPrice: product ) for productSize in productSizes track by productSize.id"
여기서 필터는 sizeWithPriceFilter이며 product 및 productSize의 두 매개 변수가 있습니다.
이처럼 :
var items = $filter('filter')(array, {Column1:false,Column2:'Pending'});
필터를 두 개 이상 처리해야하는 경우 연결할 수 있습니다.
{{ value | decimalRound: 2 | currencySimbol: 'U$' }}
// 11.1111 becomes U$ 11.11
이 코드에서 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]);
반응형
'IT' 카테고리의 다른 글
자식 : 분기를 전환하고 커밋하지 않고 변경 사항을 무시하십시오. (0) | 2020.03.18 |
---|---|
WebSockets 프로토콜과 HTTP (0) | 2020.03.18 |
xdebug var_dump를 가져 와서 전체 객체 / 배열을 표시하는 방법 (0) | 2020.03.18 |
Excel 수식에서 큰 따옴표가 포함 된 문자열을 만드는 방법은 무엇입니까? (0) | 2020.03.18 |
jQuery로 요소의 ID 변경 (0) | 2020.03.18 |