Dans le monde d'AngularJS, Filter fournit un moyen de formater les données. Angular nous fournit également de nombreux filtres intégrés, et il est également assez simple de créer des filtres personnalisés.
Dans la liaison du modèle HTML {{}}, nous utilisons | pour appeler des filtres. Par exemple, nous voulons que la chaîne affiche tous les caractères de capital:
{{nom | majuscule}}Bien sûr, nous pouvons également utiliser le service de filtre $ dans JavaScript pour appeler les filtres et utiliser la capitalisation des chaînes comme exemple:
app.Controller ('DemoController', ['$ scope', '$ filter', function ($ scope, $ filter) {$ scope.name = $ filter ('minas') ('ari');}]);Comment passer les paramètres pour filtrer? Il suffit de mettre les paramètres après le filtre et d'ajouter un côlon au milieu (s'il y a plusieurs paramètres à passer, ajoutez un côlon après chaque paramètre). Par exemple, un filtre à nombre peut nous aider à limiter le nombre de chiffres. Si vous souhaitez afficher deux décimales, ajoutez le numéro: 2.
{{123.456789 | Numéro: 2}}Le filtre du filtre est principalement utilisé pour filtrer un tableau de données et renvoyer un nouveau tableau contenant des données de sous-réseau.
Par exemple, lors de la recherche du côté client, nous pouvons rapidement filtrer les résultats que nous voulons du tableau.
Cette méthode de filtre reçoit un paramètre de chaîne, d'objet ou de fonction pour sélectionner / supprimer les éléments du tableau.
Jetons un coup d'œil en détail:
1. Filtre intégré
1, conversion majuscule de taille minuscule
{{"Lower Cap String" | majuscules}} // Résultat: chaîne de capuchon inférieure {{"Tank est bon" | minuscules}} // Résultat: le réservoir est bon｜ La ligne verticale ici est une fonction de pipeline. Si vous connaissez Linux, la fonction de pipeline de cette partie est fondamentalement la même que 2, JSON a formaté
{{{foo: "bar", baz: 23} | JSON}} // Résultat: {"foo": "bar", "baz": 23}Remarque: BZA n'a pas de doubles citations avant le formatage, et il est converti en données JSON après le formatage.
3. Formatage de la date
MySQL TimeStamp ng-bind = "Message.Time * 1000 | Date: 'Yyyy-mm-dd'"
{{1304375948024 | Date: 'Medium'}} // 03 mai 2011 06:39:08 PM {{1304375948024 | Date}} // Résultat: 3 mai 2011 {{1304375948024 | Date: "mm / dd / yyyy @ h: mma"}} // Résultat: 05/03/2011 @ 6:39 AM {{1304375948024 | Date: "Yyyy-mm-dd HH: MM: SS"}} // Résultat: 2011-05-03 06:39:084. Formatage du numéro
{{1.234567 | Numéro: 1}} // Résultat: 1.2 {{1234567 | Numéro}} // Résultat: 1 234 5675. Formatage des devises de la monnaie
{{250 | devise}} // Résultat: 250,00 $ {{250 | devise: "rmb ￥"}} // Résultat: RMB ￥ 250.006. La recherche de filtrage ne peut vérifier que la valeur, et non la clé
{{[{"Age": 20, "Id": 10, "Name": "iPhone"}, {"Age": 12, "ID": 11, "Name": "Sunm Xing"}, {"Age": 44, "ID": 12, "Name": "Test ABC"}] | Filtre: 'S'}} // Trouver des lignes avec S // Le résultat de l'exemple ci-dessus: [{"Age": 12, "Id": 11, "Name": "Sunm Xing"}, {"Age": 44, "ID": 12, "Name": "Test ABC"}] {{{}, "Âge": "ID": 10 " 12, "ID": 11, "Name": "Sunm Xing"}, {"Age": 44, "ID": 12, "Name": "Test ABC"}] | Filter: {'name': 'ip'}}} // Trouvez la ligne de nom comme IP // le résultat de l'exemple ci-dessus: [{"Age": 20, "id": 10, "name": "iPhone"}] $ filter ('nombre') (30000, 2); var jsonstring = $ filter ('JSON') ({"Age": 12, "Id": 11, "Name": "Sunm Xing"}, {"Age": 44, "Id": 12, "Name": "Test ABC"}])7. LIMTTO String, Intercept d'objet
{{"J'adore Tank" | LimitTo: 6}} // Résultat: J'adore {{"J'adore Tank" | LimitTo: -4}} // Résultat: Tank {{[{"Age": 20, "ID": 10, "Name": "iPhone"}, {"Age": 12, "Id": 11, "Name": "Sunm Xing"}, {"Age": 44, "ID": 12, "Name": "Test ABC"}] | LimitTo: 1}} // Résultat: [{"Age": 20, "ID": 10, "Name": "iPhone"}]8. Order par tri d'objet
{{[{"Age": 20, "Id": 10, "Name": "iPhone"}, {"Age": 12, "ID": 11, "Name": "Sunm Xing"}, {"Age": 44, "ID": 12, "Name": "Test ABC"}] | OrderBy: 'id': true}} // root id décroissant Ordre {{[{"" Age ": 20," ID ": 10," Name ":" iPhone "}, {" Age ": 12," Id ": 11," Name ":" Sunm Xing "}, {" Age ": 44," Id ":" Name ":" Test ABC "}] | OrderBy: 'id'}} // tri {{[{"Age": 20, "id": 10, "name": "iPhone"}, {"Age": 12, "id": 11, "name": "Sunm Xing"}, {"Age": 44, "id": 12, "name": "Test ABC"}] | OrderBy: ['- Age', 'name']}}2. Fonction de filtre personnalisée
La méthode de personnalisation du filtre est également très simple. Utilisez la méthode de filtre du module pour renvoyer une fonction qui reçoit la valeur d'entrée et renvoie le résultat traité.
app.filter ('Filter Name', fonction () {return function (objet qui doit être filtré, paramètre de filtre 1, paramètre de filtre 2, ...) {//...do certaines choses renvoient l'objet traité;}});J'ai trouvé un cadre de base AngularJS MVC, un phonecat et un filtre personnalisé, qui est également écrit sur cette base. Ce cadre est très utile.
filters.js Ajouter un module
angular.module ('tanktest', []). filter ('tankreplace', function () {return function (input) {return input.replace (/ tank /, "=====")};});Appelé en html
{{"Le réservoir est bon" | minuscules | tankreplace}} // Résultat: ===== est bonRemarque: | minuscules | Les commandes de pipeline Tankreplace peuvent avoir plusieurs
yourApp.filter ('orderObjectBy', function () {return function (items, champ, inverse) {var filtory = []; angular.ForEach (items, function (item) {filtorte.push (item);}); filtory.sort (fonction (a, b) {return (a [champ]> b [champ]? 1: -1);}); if (inverse) filtor. };});Ce filtre convertit l'objet en un tableau standard et le trie par les champs que vous spécifiez. Vous pouvez utiliser le filtre OrderObjectBy pour ressembler à OrderBy, y compris une valeur booléenne après le nom du champ, dans l'ordre spécifié s'il doit être inversé. En d'autres termes, le faux est de l'ordre croissant, le vrai déclin. appel html
<li ng-repeat = "item dans les éléments | OrderObjectBy: 'Color': true"> {{item.color}} </li>Trier la recherche
<input type = "text" ng-model = "search" placeholder = "search"> <thead> <tr> <! - ng-class = "{dropp: true}" -> <th ng-click = "ChangeOrder ('id')" ng-class = "{dropp: ordonnance === ''}"> Product numéro <pan ng-class = "{comte 'id'} "> </ span> </ th> <th ng-Click =" ChangeOrder ('name') "ng-class =" {dropp: order === ''} "> Nom du produit <span ng-class =" {OrderColor: OrderType === 'Name'} "> </spande ng-class = "{dropup: order === ''}"> prix du produit <span ng-class = "{OrderColor: OrderType === 'Price'}"> </ span> </ th> </ tr> </ thead> <tbody> <ttr ng-repeat = "Item in ProductData | Filter: Search | OrderBy: Order OrderType"> <Td> {{item.id}} </td> <td> {{item.name}} </td> <td> {{item.price | devise: '￥'}} </td> </tr> </tbody>angularjs
// champ de tri par défaut $ scope.orderType = 'id'; $ scope.order = '-'; $ scope.changeOrder = function (type) {console.log (type); $ scope.orderType = type; if ($ scope.order === '') {$ scope.order = '-'; } else {$ scope.order = ''; }}