AngularJS_AngularJS의 사용자 정의 필터에 대한 자세한 설명

필터는 이름에서 알 수 있듯이 입력을 받아 특정 규칙에 따라 처리한 후 처리된 결과를 반환하는 것입니다. 배열의 하위 집합 가져오기, 배열 요소 정렬 등과 ​​같은 데이터 형식 지정에 주로 사용됩니다. ng에는 몇 가지 내장 필터가 있습니다. 통화(통화), 날짜(날짜), 필터(하위 문자열 일치), json(형식화된 json 객체),limitTo(제한 숫자), 소문자(소문자), 대문자(대문자)) , 숫자(숫자), orderBy(정렬). 총 9가지 유형. 또한 강력하고 모든 데이터 처리 요구 사항을 충족할 수 있는 필터를 사용자 정의할 수도 있습니다.

AngularJS는 몇 가지 내장 필터를 제공합니다. 다음은 사용자 정의 필터에 대한 몇 가지 시나리오입니다.

매개변수가 없는 맞춤 필터

//过滤 不带参数
app.filter('ordinal', function () {
return function (number) {
if (isNaN(number) || number < 1) {
return number;
} else {
var lastDigit = number % 10;
if (lastDigit === 1) {
return number + 'st'
} else if (lastDigit === 2) {
return number + 'nd'
} else if (lastDigit === 3) {
return number + 'rd'
} else if (lastDigit > 3) {
return number + 'th'
}
}
}
});

대략 다음과 같이 사용됩니다:

{{777}}

매개변수로 필터링

특정 위치의 문자를 대문자로 변환합니다.

//过滤 带参数
app.filter('capitalize', function () {
//input 需要过滤的元素
//char位置，索引减一
return function (input, char) {
if (isNaN(input)) {
//如果序号位置没有设置，索引位置默认是0
var char = char - 1 || 0;
//把过滤元素索引位置上的字母转换成大写
var letter = input.charAt(char).toUpperCase();
var out = [];
for (var i = 0; i < input.length; i++) {
if (i == char) {
out.push(letter);
} else {
out.push(input[i]);
}
}
return out.join('');
} else {
return input;
}
}
}); 

대략 다음과 같이 사용됩니다:

{{'일곱' | 대문자:3}}

필터 모음

특정 조건을 충족하는 컬렉션의 요소를 필터링합니다.

var app = angular.module('filters', []);
app.controller('demo', function ($scope) {
$scope.languages = [
{name: 'C#', type: 'static'},
{name: 'PHP', type: 'dynamic'},
{name: 'Go', type: 'static'},
{name: 'JavaScript', type: 'dynamic'},
{name: 'Rust', type: 'static'}
];
});
//过滤集合
app.filter('staticLanguage', function () {
return function (input) {
var out = [];
angular.forEach(input, function (language) {
if (language.type === 'static') {
out.push(language);
}
});
return out;
}
}); 

대략 다음과 같이 사용됩니다.

<li ng-repeat="lang in languages | staticLanguage">{{lang.name}}</li>

필터링, 여러 매개변수 사용, 여러 작업 수행

숫자의 표시 단위와 표시 위치를 정의합니다.

var app = angular.module('filters', []);
app.controller('demo', function ($scope) {
$scope.digit = 29.88;
});
//过滤 做多件事 多个参赛
app.filter('customCurrency', function () {
return function (input, symbol, place) {
if (isNaN(input)) {
return input;
} else {
//检查symbol是否有实参
var symbol = symbol || '￥';
var place = place === undefined ? true : place;
if(place===true){
return symbol+input;
}else{
return input + symbol;
}
}
}
}); 

대략 다음과 같이 사용됩니다:

<p><strong>Original:</strong></p>
<ul><li>{{digit}}</li></ul>
<p><strong>Custom Currency Filter</strong></p>
<ul>
<li>{{digit | customCurrency}} --Default</li>
<li>{{digit | customCurrency:'元'}} --custom symbol</li>
<li>{{digit | customCurrency:'元':false}} -- custom symbol and custom location</li>
</ul>

필터를 사용하는 두 가지 방법

1. 템플릿에 필터

를 사용하세요.

{{}}에서 직접 필터를 사용한 다음 | 표현식을 구분할 수 있습니다.

{{ expression | filter }}

여러 필터를 함께 사용할 수도 있고, 이전 필터의 출력이 다음 필터의 입력으로 사용됩니다. (이 제품이 파이프처럼 보이는 것도 당연합니다...)

{{ expression | filter1 | filter2 | ... }}

필터는 매개변수를 받을 수 있으며, 매개변수는 다음과 같이 :으로 구분됩니다.

{{ expression | filter:argument1:argument2:... }}

{{}}의 데이터 형식을 지정하는 것 외에도 명령어에 필터를 사용할 수도 있습니다. 예를 들어 먼저 배열을 필터링한 다음 출력을 반복합니다.

<span ng-repeat="a in array | filter ">

2. 컨트롤러 및 서비스에서 필터를 사용하세요

필터는 우리에게 익숙한 종속성 주입을 통해 js 코드에서 사용할 수도 있습니다. 예를 들어 컨트롤러에서 통화 필터를 사용하려면 코드는 다음과 같습니다. 다음은:

app.controller('testC',function($scope,currencyFilter){
$scope.num = currencyFilter(123534); 
}

템플릿에서 {{num}}을(를) 사용하여 $123,534.00를 직접 출력하세요! 서비스에서 필터를 사용할 때도 마찬가지입니다.

이쯤 되면 컨트롤러에 여러 개의 필터를 사용하려면 하나씩 주입해야 하는 걸까요? 동생님, 걱정 마세요~ $filter 서비스를 제공하여 필요한 필터를 호출하기만 하면 됩니다. 사용 방법은 다음과 같습니다.

app.controller('testC',function($scope,$filter){
$scope.num = $filter('currency')(123534);
　　$scope.date = $filter('date')(new Date()); 
}

동일한 효과를 얻을 수 있습니다. 다양한 필터를 편리하게 사용할 수 있다는 장점이 있습니다.