Maison > interface Web > js tutoriel > le corps du texte

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

WBOY
Libérer: 2016-05-16 15:23:20
original
1344 Les gens l'ont consulté

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'
}
}
}
});
Copier après la connexion

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;
}
}
}); 
Copier après la connexion

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;
}
}); 
Copier après la connexion

Utilisé à peu près comme ceci :

<li ng-repeat="lang in languages | staticLanguage">{{lang.name}}</li>
Copier après la connexion

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 &#63; true : place;
if(place===true){
return symbol+input;
}else{
return input + symbol;
}
}
}
}); 
Copier après la connexion

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>
Copier après la connexion

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 }}
Copier après la connexion

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 | ... }}
Copier après la connexion

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

{{ expression | filter:argument1:argument2:... }}
Copier après la connexion

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 ">
Copier après la connexion

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); 
}
Copier après la connexion

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()); 
}
Copier après la connexion

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

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal