Explication détaillée des filtres personnalisés dans AngularJS_AngularJS

Le filtre, comme son nom l'indique, consiste à recevoir une entrée, à la traiter selon une certaine règle, puis à renvoyer le résultat traité. Il est principalement utilisé pour le formatage des données, comme l'obtention d'un sous-ensemble d'un tableau, le tri des éléments dans un tableau, etc. ng a des filtres intégrés, ils sont : devise (devise), date (date), filtre (correspondance de sous-chaîne), json (objet json formaté), limitTo (nombre limite), minuscule (minuscule), majuscule (majuscule) ) , number (numéro), orderBy (tri). Neuf types au total. De plus, vous pouvez également personnaliser les filtres, ce qui est puissant et peut répondre à toutes les exigences de traitement des données.

AngularJS nous fournit des filtres intégrés Voici quelques scénarios de filtres personnalisés.

Filtre personnalisé sans paramètres

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

Utilisé à peu près comme ceci :

{{777 | ordinal}}

Filtrage avec paramètres

Convertissez les lettres dans une certaine position en majuscules.

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

Utilisé à peu près comme ceci :

{{'sept' | majuscule :3}}

Collection de filtres

Filtrez les éléments de la collection qui remplissent certaines conditions.

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

Utilisé à peu près comme ceci :

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

Filtrer, prendre plusieurs paramètres, faire plusieurs choses

Définissez l'unité d'affichage et la position d'affichage du numéro.

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

Utilisé à peu près comme ceci :

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

Deux façons d'utiliser le filtre

1. Utilisez le filtre

dans le modèle

On peut utiliser le filtre directement dans {{}}, suivi de | pour séparer l'expression. La syntaxe est la suivante :

{{ expression | filter }}

Vous pouvez également utiliser plusieurs filtres ensemble, et la sortie du filtre précédent sera utilisée comme entrée du filtre suivant (pas étonnant que ce produit ressemble à un tuyau...)

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

le filtre peut recevoir des paramètres, et les paramètres sont divisés par :, comme suit :

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

En plus de formater les données en {{}}, nous pouvons également utiliser un filtre dans l'instruction, par exemple, filtrer d'abord le tableau puis boucler la sortie :

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

2. Utiliser le filtre dans le contrôleur et le service

Les filtres peuvent également être utilisés dans notre code js via l'injection de dépendances que nous connaissons. Par exemple, si je souhaite utiliser le filtre de devise dans un contrôleur, il me suffit de l'injecter dans le contrôleur. suit :

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

Utilisez {{num}} dans le modèle pour générer directement 123 534,00 $ ! Il en va de même pour l'utilisation de filtres dans les services.

À ce stade, vous pouvez avoir des doutes. Si je souhaite utiliser plusieurs filtres dans le contrôleur, dois-je les injecter un par un, cela ne serait-il pas trop laborieux ? Petit frère, ne vous inquiétez pas, ~ng fournit un service $filter pour appeler le filtre requis. Il vous suffit d'injecter un $filter. La méthode d'utilisation est la suivante :

.

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

Le même effet peut être obtenu. L’avantage est que vous pouvez facilement utiliser différents filtres.