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' }} c45dcb36d31f912a9667590ba02dcb5d
Année à deux chiffres : {{ aujourd'hui | date : 'aa' }} 77a36d226f4911418a58b2e40ef1f997
Année : {{ aujourd'hui | date : 'y' }} c45dcb36d31f912a9667590ba02dcb5d
Formatage du mois
Mois anglais : {{ aujourd'hui | date :'MMMM' }} 8011ea588fdab9cd87a7420508b4d998
Abréviation du mois en anglais : {{ aujourd'hui | date : 'MMM' }} 8011ea588fdab9cd87a7420508b4d998
Mois numérique : {{ aujourd'hui |date :'MM' }} 75a5cf1a04299dceb5110e26a4b48542
Mois de l'année : {{ aujourd'hui |date :'M' }} a86de02df5a905295e8dc7804f78a5ca
Formatage de la date
Date numérique : {{ aujourd'hui|date:'dd' }} 3d30e0f5172fc6d24029e0e7a57b37d2
Jour du mois : {{ aujourd'hui | date :'d' }} 8bb54ee79ab8d013822d1db96936536f
Jour de la semaine en anglais : {{ aujourd'hui | date :'EEEE' }} f05aa0430a31dc14cfacab17360d949e
Abréviation de la semaine en anglais : {{ aujourd'hui | date : 'EEE' }} e231ef33ab0b57b7e19d6a925a28ef37
Formatage des heures
Heure numérique sur 24 heures : {{aujourd'hui|date :'HH'}} ef72c658846c1084161df55b19ce8c24
Heure de la journée : {{aujourd'hui|date :'H'}} 902f4f72964ab5f05217214ee25eb31b
Heure numérique sur 12 heures : {{aujourd'hui|date:'hh'}} fb30a4b0d26192a15972624ccb337852
Heure du matin ou de l'après-midi : {{aujourd'hui|date:'h'}} fb30a4b0d26192a15972624ccb337852
Formatage des minutes
Minutes numériques : {{ aujourd'hui | date : 'mm' }} 3d30e0f5172fc6d24029e0e7a57b37d2
Minute de l'heure : {{ aujourd'hui | date : 'm' }} 8bb54ee79ab8d013822d1db96936536f
Formatage des secondes
Secondes numériques : {{ aujourd'hui | date : 'ss' }} 779138eee8ec233d5f15002382413251
La seconde dans une minute : {{ aujourd'hui | date :'s' }} 9d2785f9d933780796b37864972a231f
Nombre de millisecondes : {{ aujourd'hui | date :'.sss' }} 132404d696749dd146bc462e6ef8004e
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.