démo
Voici toute l'exemple de démo
1. Fichier Filter.js
Angular.Module ("exampleApp", []). constant ("producdUrl", "http: // localhost: / products") .Controller ("DefaultCtrl", function ($ Scope, $ http, producdUrl) {$ http.get (ProductsUrl) .Success (fonction (data) {$ scope.products = data; tableau});});Ici, j'utilise le service introduit comme une constante, et l'avantage de l'écriture est que je peux facilement le modifier.
Pour comment utiliser le service $ http, veuillez consulter mon AngularJS (iii) déployé
<! Doctype html> <html xmlns = "http://www.w.org//xhtml" ng-app = "exampleApp"> <adref> <meta http-equiv = "contenu-type" contenu = "text / html; charset = utf -" /> <tapt> </ title> src = "angular.js"> </ script> <link href = "bootstrap-theme.css" rel = "Stylesheet" /> <link href = "bootstrap.css" rel = "Stylesheet" /> <script src = "filter.js"> </ script> </-head> <body ng-control > <div> <div> <h> Produits </h> </ div> <s tablel> <thead> <tr> <td> nom </td> <td> catégorie </td> <td> Price </td> <td> Expire </td> </tr> </phead> <tbody> <ttr ng-repeat = "item dans products"> <td> {{élément. Uppercase}} </td> <td> {{item.category}} </td> <td> {{item.price | devise}} </td> <td> {{item.expiry | numéro}} </td> <td> {{item | JSON}} </td> </tr> </ tbody> </ table> </div> </body> </html>Résultats de la course:
Utiliser le filtre
Les filtres sont divisés en deux catégories:
1. Filtrage des données individuelles
2. Opérez sur l'ensemble.
1. Il est relativement simple d'exploiter les données . Comme indiqué sur la démo, il peut être formaté dans {{item | devise}}, etc.
Devise: "F" peut être le prix filtré en livres.
Un seul filtre de données souhaite filtrer le format de données, après le filtre: dans le caractère de format correspondant.
Numéro: représente les décimales de données réservées.
2: Filtrage de collecte , filtrant un certain nombre de la collection.
Dans la démo de base, j'ai ajouté ceci:
<div> <h> Produits </h> </div> <v> Limite: <sélectionner ng-model = "limitvalue" ng-options = "p pour p in limiteRange"> </lect> </div> filter.js a été ajouté: $ http.get (productUrl) .successs (fonction (data) {$ scope.products = data; // directement pour arrader pour arrader {$ scope.products = data; // directement pour arrader pour arrader pour Array $ scope.limitValue = ""; // s'il s'agit d'une chaîne <span style = "background-Color: rgb (,,);"> $ scope.limitrange = []; for (var i =; i <= $ scope.products.length; i ++) {$ scope.limitrange.push (i.tostring ()); <spany = "background-colior: rgb (,);" } </span> </span>}); <tr ng-repeat = "item dans les produits | limitto: limitvalue"> <td> {{item.name | Uppercase}} </td> <td> {{item.category}} </td> <td> {{item.price | devise}} </td> <td> {{item.expiry | numéro}} </td> <td> {{item | JSON}} </td> </tr> <span style = "Line-Height:.Lorsque vous écrivez des fonctions, vous devez être écrit dans le succès car les données JSON sont obtenues de manière asynchrone.
résultat:
Limite: Vous pouvez ajuster le nombre de personnes affichées sur la page.
Créer un filtre
AngularJS a deux filtres. Tout d'abord, nous pouvons créer des filtres qui formatent des données individuelles, telles que: la capitalisation de première lettre de la chaîne de sortie.
Parlons d'abord de la façon de définir un filtre: le filtre est créé via module.filter, et le format général de la création est:
angular.module ("exampleApp") // signifie obtenir un module. Le filtre est créé sous le module.
.Filter ("LabelCase", function () {// reçoit deux paramètres, le premier paramètre représente le nom du filtre, et le second est une fonction d'usine
Fonction de retour (valeur, revers) {// renvoie une fonction de travail pour filtrer le processus de filtrage correspondant. Le premier paramètre indique l'objet qui doit être formaté, et le deuxième paramètre indique la configuration et le format à suivre.
if (angular.issstring (valeur)) {var intermédiaire = revers? value.touppercase (): value.tolowercase (); return (revers? intermédiaire []. TolowerCase (): intermédiaire []. toupperase () + intermediate.substr ());} else {return value;}}});J'ai écrit ceci dans un fichier JS. CustomFilter.js n'oubliez pas de l'ajouter.
<link href = "bootstrap.css" rel = "Stylesheet" /> <script src = "filter.js"> </ script> <script src = "customFilter.js"> </ script>
Ok maintenant je vais changer les données:
<td> {{item.name | Labelcase: true}} </td>Comme mentionné précédemment, si vous devez ajouter des informations de configuration, le format d'écriture est filtre: Option
Bien sûr, les paramètres par défaut ne peuvent pas être écrits et la valeur par défaut sera donnée nul ou non définie.
résultat:
Il est aussi simple de personnaliser une fonction de filtre pour le traitement de chaque données.
2. Personnalisez les fonctions traitées par une collection, tout comme LicondTo.
Angular.module ("exampleApp"). Filter ("LabelCase", fonction () {return function (valeur, reverse) {if (angular.isstring (valeur)) {var intermédiaire = revers? Value.Toupperase (): valeur.tolowercase (); return (inverse? Intermediate []. TolowerCase (): intermédiaire []. Intermediate.substr ());} else {return Value;}}}). Filter ("skip", function () {return function (data, count) {if (angular.isArray (data) && angular.isnumber (count)) {if (data.length <count || count <) {return data;} else {return data.slice (count);}} données;}}});La pièce modifiée HTML:
<tr ng-repeat = "Article dans les produits | Skip:">
Résultats: Il y a un total de six données et 2 pièces ont été passées en utilisant un filtre à sauts.
Lors de la personnalisation du filtre, j'ai constaté qu'un filtre avait été défini. Je ne veux pas le définir à plusieurs reprises. Que dois-je faire? Nous pouvons également utiliser un filtre créé pour le créer.
Angular.module ("exampleApp"). Filter ("LabelCase", fonction () {return function (valeur, reverse) {if (angular.isstring (valeur)) {var intermédiaire = revers? Value.Toupperase (): valeur.tolowercase (); return (inverse? Intermediate []. TolowerCase (): intermédiaire []. Intermediate.substr ());} else {return Value;}}}). Filter ("skip", function () {return function (data, count) {if (angular.isArray (data) && angular.isnumber (count)) {if (data.length <count || count <) {return data;} else {return data.slice (count);}} données;}}}). Filter ("Take", fonction ($ filter) {// Vous pouvez voir que je fais référence au service intégré d'AngularJS dans la fonction d'usine. Return Fonction (données, SkipCount, TakeCount) {// Vous pouvez voir si je passe trois paramètres ici? var skipdata = $ Filter ('skip') (Data, Data, SKIPCount); Programmation.$ filter ('skip') appelle le filtre de skip, car il renvoie une fonction, nous pouvons donc continuer à passer les paramètres.
<tr ng-repeat = "Article dans les produits | prendre ::">
résultat:
C'est ainsi que le filtre est effectué. N'est-ce pas très simple?