Explication détaillée de l'utilisation des filtres AngularJS_AngularJS

Les filtres AnularJS sont utilisés pour formater les données qui doivent être affichées aux utilisateurs. Il existe de nombreux filtres intégrés pratiques, et vous pouvez également les écrire vous-même.

Appelez le filtre via le symbole | dans le symbole de liaison du modèle {{ }} en HTML. Par exemple, disons que nous voulons convertir la chaîne
Pour convertir en majuscules, vous pouvez convertir chaque caractère de la chaîne individuellement ou utiliser un filtre :

{{ nom | majuscule }}
Les filtres peuvent être appelés via $filter dans le code JavaScript. Par exemple, en utilisant les minuscules
dans le code JavaScript Filtre :

app.controller('DemoController', ['$scope', '$filter',
function($scope, $filter) {
$scope.name = $filter('lowercase')('Ari');
}]);

Lors de l'utilisation de filtres au format HTML, si vous devez transmettre des paramètres au filtre, ajoutez simplement deux points après le nom du filtre
C'est ça. S'il existe plusieurs paramètres, vous pouvez ajouter deux points après chaque paramètre. Par exemple, un filtre numérique peut limiter le nombre de décimales
Le nombre de chiffres, écrivez : 2 après le filtre, vous pouvez passer 2 en paramètre au filtre :

<!-- 显示：123.46 -->
{{ 123.456789 | number:2 }}

1. monnaie
Le filtre de devise peut formater une valeur numérique au format monétaire. Utilisez {{ 123 | devise }} pour convertir 123
au format monétaire.
Le filtre de devise nous permet de définir nous-mêmes le symbole monétaire. Par défaut, le symbole monétaire de la région du client sera utilisé,
Mais vous pouvez également personnaliser les symboles monétaires.
2.date
Le filtre de date peut formater la date au format requis. Il existe plusieurs formats de date intégrés à AngularJS, sinon
Spécifiez n'importe quel format à utiliser. Le format mediumDate sera utilisé par défaut. Ce format est présenté dans l'exemple ci-dessous.
Voici les formats de date localisés intégrés pris en charge :

{{ today | date:'medium' }} <!-- Aug 09, 2013 12:09:02 PM -->
{{ today | date:'short' }} <!-- 8/9/1312:09PM -->
{{ today | date:'fullDate' }} <!-- Thursday, August 09, 2013 -->
{{ today | date:'longDate' }} <!-- August 09, 2013 -->
{{ today | date:'mediumDate' }}<!-- Aug 09, 2013 -->
{{ today | date:'shortDate' }} <!-- 8/9/13 -->
{{ today | date:'mediumTime' }}<!-- 12:09:02 PM -->
{{ today | date:'shortTime' }} <!-- 12:09 PM -->

Formatage de l'année
Année à quatre chiffres : {{ aujourd'hui | date : 'aaaa' }}
Année à deux chiffres : {{ aujourd'hui | date : 'aa' }}
Année : {{ aujourd'hui | date : 'y' }}
Formatage du mois
Mois anglais : {{ aujourd'hui | date :'MMMM' }}
Abréviation du mois en anglais : {{ aujourd'hui | date : 'MMM' }}
Mois numérique : {{ aujourd'hui |date :'MM' }}
Mois de l'année : {{ aujourd'hui |date :'M' }}
Formatage de la date
Date numérique : {{ aujourd'hui|date:'dd' }}
Jour du mois : {{ aujourd'hui | date :'d' }}
Jour de la semaine en anglais : {{ aujourd'hui | date :'EEEE' }}
Abréviation de la semaine en anglais : {{ aujourd'hui | date : 'EEE' }}
Formatage des heures
Heure numérique sur 24 heures : {{aujourd'hui|date :'HH'}}
Heure de la journée : {{aujourd'hui|date :'H'}}
Heure numérique sur 12 heures : {{aujourd'hui|date:'hh'}}
Heure du matin ou de l'après-midi : {{aujourd'hui|date:'h'}}
Formatage des minutes
Minutes numériques : {{ aujourd'hui | date : 'mm' }}
Minute de l'heure : {{ aujourd'hui | date : 'm' }}
Formatage des secondes
Secondes numériques : {{ aujourd'hui | date : 'ss' }}
La seconde dans une minute : {{ aujourd'hui | date :'s' }}
Nombre de millisecondes : {{ aujourd'hui | date :'.sss' }}
Voici quelques exemples de formats de date personnalisés :

{{ today | date:'MMMd, y' }} <!-- Aug9, 2013 -->
{{ today | date:'EEEE, d, M' }} <!-- Thursday, 9, 8-->
{{ today | date:'hh:mm:ss.sss' }} <!-- 12:09:02.995 -->

filtre

filter filter peut sélectionner un sous-ensemble du tableau donné, générer un nouveau tableau et le renvoyer.

Par exemple, utilisez le filtre suivant pour sélectionner tous les mots contenant la lettre e :

{{ ['Ari','Lerner','Likes','To','Eat','Pizza'] | filter:'e' }}
<!-- ["Lerner","Likes","Eat"] -->

Si vous souhaitez filtrer des objets, vous pouvez utiliser le filtre d'objet mentionné ci-dessus. Par exemple, si vous avez un
composé d'objets personnes Tableau, chaque objet contient une liste de ses aliments préférés, qui peuvent être filtrés sous la forme suivante :

{{ [{
'name': 'Ari',
'City': 'San Francisco',
'favorite food': 'Pizza'
},{
'name': 'Nate',
'City': 'San Francisco',
'favorite food': 'indian food'
}] | filter:{'favorite food': 'Pizza'} }}
<!-- [{"name":"Ari","City":"SanFrancisco","favoritefood":"Pizza"}] -->

Vous pouvez également utiliser une fonction personnalisée pour le filtrage (dans cet exemple, la fonction est définie sur $scope) :

{{ ['Ari','likes','to','travel'] | filter:isCapitalized }}
<!-- ["Ari"] -->

La fonction de la fonction isCapitalized est de renvoyer vrai ou faux selon que la première lettre est en majuscule, comme indiqué ci-dessous :

$scope.isCapitalized = function(str) {
return str[0] == str[0].toUpperCase();
};

Filtres personnalisés

Tout d'abord, créez un module à référencer dans l'application

angular.module('myApp.filters', [])
.filter('capitalize', function() {
return function(input) {
// input是我们传入的字符串
if (input) {
return input[0].toUpperCase() + input.slice(1);
}
});

Maintenant, si vous souhaitez convertir la première lettre d'une phrase en majuscule, vous pouvez utiliser le filtre pour convertir d'abord la phrase entière en majuscule
Écrivez, puis convertissez la première lettre en majuscule :

<!-- Ginger loves dog treats -->
{{ 'ginger loves dog treats' | lowercase | capitalize }}

Ce qui précède explique comment utiliser les filtres AngularJS. J'espère que cela sera utile à l'apprentissage de chacun.