Detaillierte Erläuterung der benutzerdefinierten Filter in AngularJS_AngularJS

Filter besteht, wie der Name schon sagt, darin, eine Eingabe zu empfangen, sie gemäß einer bestimmten Regel zu verarbeiten und dann das verarbeitete Ergebnis zurückzugeben. Es wird hauptsächlich zur Datenformatierung verwendet, z. B. zum Abrufen einer Teilmenge eines Arrays, zum Sortieren von Elementen in einem Array usw. ng verfügt über einige integrierte Filter: Währung (Währung), Datum (Datum), Filter (Teilzeichenfolgenübereinstimmung), JSON (formatiertes JSON-Objekt), LimitTo (Grenzzahl), Kleinbuchstaben (Kleinbuchstaben), Großbuchstaben (Großbuchstaben). , Zahl (Anzahl), orderBy (Sortierung). Insgesamt neun Typen. Darüber hinaus können Sie auch Filter anpassen, was leistungsstark ist und alle Datenverarbeitungsanforderungen erfüllen kann.

AngularJS stellt uns einige integrierte Filter zur Verfügung. Hier sind einige Szenarien für benutzerdefinierte Filter.

Benutzerdefinierter Filter ohne Parameter

//过滤 不带参数
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'
}
}
}
});

Wird ungefähr so ​​verwendet:

{{777 |. Ordnungszahl}}

Filtern mit Parametern

Konvertieren Sie Buchstaben an einer bestimmten Position in Großbuchstaben.

//过滤 带参数
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;
}
}
}); 

Wird ungefähr so ​​verwendet:

{{'seven' |

Sammlung filtern

Filtern Sie Elemente in der Sammlung heraus, die bestimmte Bedingungen erfüllen.

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;
}
}); 

Wird ungefähr so ​​verwendet:

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

Filtern, mehrere Parameter übernehmen, mehrere Dinge tun

Definieren Sie die Anzeigeeinheit und die Anzeigeposition der Nummer.

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;
}
}
}
}); 

Wird ungefähr so ​​verwendet:

<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>

Zwei Möglichkeiten, den Filter zu verwenden

1. Filter in der Vorlage verwenden

Wir können den Filter direkt in {{}} verwenden, gefolgt von |, um den Ausdruck zu trennen:

{{ expression | filter }}

Sie können auch mehrere Filter zusammen verwenden und die Ausgabe des vorherigen Filters wird als Eingabe des nächsten Filters verwendet (kein Wunder, dass dieses Produkt wie eine Pfeife aussieht...)

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

Filter kann Parameter empfangen, und die Parameter werden wie folgt durch : geteilt:

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

Zusätzlich zur Formatierung der Daten in {{}} können wir auch Filter in der Anweisung verwenden, zum Beispiel zuerst das Array filtern und dann die Ausgabe in einer Schleife ausführen:

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

2. Filter in Steuerung und Service verwenden

Filter können in unserem JS-Code auch durch die uns bekannte Abhängigkeitsinjektion verwendet werden. Wenn ich beispielsweise den Währungsfilter in einem Controller verwenden möchte, muss ich ihn nur in den Controller einfügen folgt:

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

Verwenden Sie {{num}} in der Vorlage, um 123.534,00 $ direkt auszugeben! Das Gleiche gilt für die Verwendung von Filtern in Diensten.

An dieser Stelle haben Sie vielleicht Zweifel, ob ich mehrere Filter einzeln in den Controller einbauen möchte? Kleiner Bruder, keine Sorge, ~ng bietet einen $filter-Dienst zum Aufrufen des erforderlichen Filters. Sie müssen nur einen $filter einfügen. Die Verwendungsmethode ist wie folgt:

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

Derselbe Effekt kann erzielt werden. Der Vorteil besteht darin, dass Sie bequem verschiedene Filter verwenden können.