반응형
여러 인수를 사용하여 Angular.js 필터를 호출하려면 어떻게 해야 합니까?
{{ myDateInScope | date: 'yyyy-MM-dd' }}
여기서 date는 하나의 인수를 사용하는 필터입니다.
템플릿과 JavaScript 코드 양쪽에서 더 많은 파라미터를 사용하여 필터를 호출하는 구문은 무엇입니까?
템플릿에서는 필터 인수를 콜론으로 구분할 수 있습니다.
{{ yourExpression | yourFilter: arg1:arg2:... }}
Javascript에서는 다음과 같이 부릅니다.
$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>
아래에서는 커스텀필터도 언급했습니다.이러한 필터는 2개의 파라미터가 있습니다.
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 입니다.이것은 : 기호를 사용하여 "reverse"와 조합됩니다.
ng-options 내의 필터를 호출하는 경우 코드는 다음과 같습니다.
ng-options="productSize as ( productSize | sizeWithPrice: product ) for productSize in productSizes track by productSize.id"
여기서 필터는 크기입니다.With Price Filter는 product와 product Size의 2가지 파라미터를 가지고 있습니다.
다음과 같습니다.
var items = $filter('filter')(array, {Column1:false,Column2:'Pending'});
필터를 2개 이상 취급할 필요가 있는 경우,는 그것들을 체인으로 할 수 있습니다.
{{ value | decimalRound: 2 | currencySimbol: 'U$' }}
// 11.1111 becomes U$ 11.11
이 코드에서는 jondata가 배열이며 함수 반환에서는 jondata에 존재하는 '버전'을 확인합니다.
var as = $filter('filter')(jsondata, function (n,jsondata){
return n.filter.version==='V.0.3'
});
console.log("name is " + as[0].name+as[0]);
언급URL : https://stackoverflow.com/questions/16227325/how-do-i-call-an-angular-js-filter-with-multiple-arguments
반응형
'programing' 카테고리의 다른 글
Zend Framework가 AJAX 응답을 전송할 때 보기/레이아웃을 렌더링하지 않도록 하려면 어떻게 해야 합니까? (0) | 2023.03.27 |
---|---|
setState in reactjs가 Sync가 아닌 비동기인 이유는 무엇입니까? (0) | 2023.03.27 |
반응의 getElementById (0) | 2023.03.27 |
CORS OPTIONS 사전 운항 요청 처리 방법에 대해 혼란스러움 (0) | 2023.03.27 |
React js의 "마운팅"이란 무엇입니까? (0) | 2023.03.27 |