English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Le filter, comme son nom l'indique, a pour fonction de recevoir une entrée, de la traiter selon une règle et de renvoyer le résultat traité. Il est principalement utilisé pour la mise en forme des données, par exemple pour obtenir un sous-ensemble d'un tableau, pour trier les éléments d'un tableau, etc. ng intègre quelques filters, ils sont : currency (monnaie), date (date), filter (correspondance de sous-chaîne), json (formatage d'objet json), limitTo (limiter le nombre), lowercase (minuscules), uppercase (majuscules), number (numérique), orderBy (tri). Au total, neuf types. De plus, il est possible de définir des filters personnalisés, ce qui est très puissant et peut répondre à n'importe quel besoin de traitement de données.
Le contenu du filter est très simple, il suffit de comprendre comment utiliser les filters intégrés et de définir soi-même un filter pour être prêt ~ J'ai appris beaucoup aujourd'hui, je vais faire une introduction.
Deux méthodes d'utilisation du filter
1. Utilisation du filter dans le template
Nous pouvons utiliser directement le filter dans {{}}, suivi de l'expression par un |, la syntaxe est la suivante :
{{ expression | filter }}
également utiliser plusieurs filters consécutifs, la sortie du filter précédent servant d'entrée au filter suivant (c'est pourquoi il ressemble tant à un tuyau...)
{{ expression | filter1 | filter2 | ... }}
Les filtres peuvent recevoir des paramètres, les paramètres sont séparés par :, par exemple :
{{ expression | filter:argument1:argument2:... }}
En plus de formater les données dans {{}}, nous pouvons également utiliser les filtres dans les directives, par exemple, nous pouvons d'abord filtrer le tableau array, puis le parcourir en boucle :
<span ng-repeat="a in array | filter ">
2. Utilisation des filtres dans le controller et le service
Nous pouvons également utiliser les filtres dans notre code JavaScript, la méthode est la dépendance injection que nous connaissons bien, par exemple, si je veux utiliser le filtre currency dans le controller, je n'ai besoin que de l'injecter dans ce controller, voici le code :
app.controller('testC',function($scope,currencyFilter){
$scope.num = currencyFilter(123534);
};
Vous pouvez directement afficher ${{num}} dans le modèle.123,534Le zéro décimal est atteint ! Le filtre est utilisé de la même manière dans le service.
Vous pourriez peut-être avoir des doutes, si je veux utiliser plusieurs filtres dans le controller, dois-je les injecter un par un, ce qui serait trop fastidieux ? Ne vous inquiétez pas, mon ami ~ Angular fournit un service $filter pour appeler les filtres nécessaires, vous n'avez besoin que d'injecter $filter, voici la méthode d'utilisation :
app.controller('testC',function($scope,$filter){
$scope.num = $filter('currency')(123534);
$scope.date = $filter('date')(new Date());
};
Cela peut également obtenir le même effet. L'avantage est que vous pouvez utiliser différents filtres en toute facilité.
Filtres intégrés d'Angular
Angular intègre neuf filtres, leur utilisation est très simple, vous pouvez comprendre en lisant la documentation. Cependant, pour éviter de consulter la documentation à l'avenir, je vais quand même faire une enregistrement détaillé ici.
1. currency (traitement monétaire)
L'utilisation de currency permet de formater un nombre en monnaie, le symbole par défaut est le dollar, vous pouvez également entrer le symbole souhaité, par exemple, j'ai entré le renminbi :
{{num | currency : '￥'}}
2. date (formatage des dates)
La capacité de formatage des dates du JavaScript natif est limitée, le filtre date fourni par Angular peut généralement répondre aux exigences de formatage. Voici l'utilisation :
{{date | date : 'yyyy-MM-dd hh:mm:ss EEEE
le paramètre est utilisé pour spécifier le format souhaité, y M d h m s E représentent respectivement année mois jour heure minute seconde jour de la semaine, vous pouvez les combiner librement. Vous pouvez également utiliser des nombres différents pour limiter le nombre de chiffres formatés. De plus, le paramètre peut utiliser des chaînes descriptives spécifiques, par exemple, 'shortTime' formatera l'heure sous la forme12:05 tel que pm. Angular fournit huit chaînes descriptives, je pense que c'est un peu superflu, je peux完全可以 selon mon goût composer le format désiré, je n'ai pas besoin de m'en souvenir autant de mots ~
3. filter(correspondre à la sous-chaîne)
Ce filtre appelé filter (je ne peux pas m'empêcher de le dire, ce nom est vraiment confus - !) est utilisé pour traiter un tableau, puis peut filtrer les éléments contenant une sous-chaîne spécifique et les renvoyer sous forme de sous-tableau. Il peut s'agir d'un tableau de chaînes ou d'un tableau d'objets. Si c'est un tableau d'objets, il peut correspondre à la valeur de l'attribut. Il prend un paramètre pour définir les règles de correspondance de la sous-chaîne. Voici un exemple pour illustrer l'utilisation des paramètres, j'ai défini un tableau avec quelques enfants très populaires à l'heure actuelle :
$scope.childrenArray = [
{name:'kimi',age:3},
{name:'cindy',age:4},
{name:'anglar',age:4},
{name:'shitou',age:6},
{name:'tiantian',age:5};
];
$scope.func = function(e){return e.age>4;}
{{ childrenArray | filter : 'a' }} //correspondant à la valeur de l'attribut contenant a
{{ childrenArray | filter : 4 }} //correspondant à la valeur de l'attribut contenant4de
{{ childrenArray | filter : {name : 'i'} }} //le paramètre est un objet, correspondant à l'attribut name contenant i
{{childrenArray | filter : func }} //le paramètre est une fonction, spécifiant le retour age>4de
4. json(formater l'objet JSON)
Le filtre JSON peut formater un objet JS en chaîne JSON, sans paramètres. À quoi ça sert, je ne mettrais généralement pas une chaîne JSON sur une page, le site officiel dit qu'il peut être utilisé pour le débogage, eh bien, c'est une bonne option. Ou, il peut également être utilisé dans JS, son effet est le même que JSON.stringify(). L'utilisation est très simple :
{{ jsonTest | json}}
5. limitTo(longueur limitée du tableau ou de la chaîne)
Le filtre limitTo permet de couper un tableau ou une chaîne, il reçoit un paramètre pour spécifier la longueur de la coupure, si le paramètre est négatif, il coupe à partir de la fin du tableau. Je pense que ce filtre est assez inutile, car il ne peut qu'extraire de l'array ou de la chaîne depuis le début/Effectue une coupure à la fin, d'ailleurs, les fonctions natives de js peuvent le remplacer, voyons comment l'utiliser :
{{ childrenArray | limitTo : 2 }} //Affichera les deux premiers éléments de l'array
6. lowercase(minuscule)
Convertit les données en minuscules. Très simple, pas besoin d'expliquer en détail. C'est également un filter assez inutile, sans paramètre, il ne peut convertir que l'ensemble de la chaîne en minuscules, sans pouvoir spécifier les lettres. Je n'ai même pas envie de l'écrire.
7. uppercase(majuscule)
Comme précédemment.
8. number(formatage du nombre)
Le filtre number peut ajouter des séparateurs de milliers à un nombre, comme ceci ,123,456,789. Il reçoit également un paramètre, permettant de spécifier combien de décimales pour le type float :
{{ num | number : 2 }}
9. orderBy(tri)
Le filtre orderBy permet de trier les éléments d'un tableau, il prend un paramètre pour spécifier la règle de tri, ce paramètre peut être une chaîne, indiquant de trier par ce nom d'attribut. Il peut également être une fonction, définissant l'attribut de tri. Il peut également être un tableau, indiquant de trier par les valeurs des attributs de l'array (si les valeurs du premier élément sont égales, comparez le deuxième élément), prenons l'exemple de l'array des enfants ci-dessus :
<div>{{ childrenArray | orderBy : 'age' }}</div>/div> //Trie par valeur de l'attribut age, si-Si l'âge est inférieur, trie en ordre décroissant
<div>{{ childrenArray | orderBy : orderFunc }}</div>/div> //Trie par retour de la fonction
<div>{{ childrenArray | orderBy : ['age','name'] }}</div>/div> //Si l'âge est le même, trie par nom
Les filtres intégrés ont été décrits, j'ai presque somnolé... Comme vous pouvez le voir, les filtres intégrés de ng ne sont pas infaillibles, en fait, beaucoup sont assez inutiles. Pour des besoins plus personnalisés, nous devons définir nos propres filtres. Voyons maintenant comment définir un filtre personnalisé.
Filtre personnalisé
La personnalisation des filtres est aussi simple, utilisez la méthode filter du module, retournez une fonction, cette fonction reçoit la valeur d'entrée et retourne le résultat traité. Sans plus attendre, écrivons-en un. Par exemple, j'ai besoin d'un filtre qui peut retourner les éléments d'index impair d'un tableau, le code est comme suit :
app.filter('odditems',function(){
return function(inputArray){
var array = [];
for(var i=0;i<inputArray.length;i++{
if(i%2!==0){
array.push(inputArray[i]);
};
};
return array;
};
});
Le format est ainsi, votre logique de traitement est écrite dans la fonction de fermeture interne. Vous pouvez également faire en sorte que votre filtre reçoive des paramètres, définis dans la fonction return, en tant que deuxième paramètre, ou plus encore.
Voici les bases des filtres. Comme toujours, plus vous avez besoin d'apprendre, plus vous devez être testé par des projets réels. Alors, avant que le projet ne vienne, préparons bien les bases ~
Voici la fin de l'article. J'espère que cela vous aidera dans vos études et que vous soutiendrez également le tutoriel Yelling.
Déclaration : le contenu de cet article est tiré d'Internet, propriété de ses auteurs respectifs, partagé par les utilisateurs d'Internet de manière volontaire et téléversé, ce site ne détient pas de droits de propriété, n'a pas été édité par l'homme, et n'assume aucune responsabilité juridique. Si vous trouvez du contenu présumé portant atteinte aux droits d'auteur, n'hésitez pas à envoyer un e-mail à : notice#oldtoolbag.com (veuillez remplacer # par @ lors de l'envoi d'un e-mail pour signaler une violation, et fournir des preuves pertinentes. Une fois vérifié, ce site supprimera immédiatement le contenu présumé illicite.