Filtro (filtro) in angularJS
Mục lục
Il concetto e il ruolo dei filtri in angularJS
Quando ci avviciniamo con javascript puro, vediamo, quando lavoriamo con i dati, ci sono alcune situazioni in cui dovremo convertire un tipo di dati persistente piuttosto complicato, per fare un esempio reale, quando abbiamo una variabile che rappresenta la quantità con tipo di dati numero ( float) , se vogliamo stampare sullo schermo in formato valuta, dovremo eseguire i seguenti passaggi in sequenza:
- Converti il tipo di dati in stringa,
- Concatena le stringhe aggiungendo un segno $ dopo la stringa
- Stampa la stringa all'interno del contenuto HTML (tramite la proprietà innerText)
- Ripetere i passaggi precedenti in sequenza quando i dati vengono aggiornati
Con angularJs, abbiamo un meccanismo di filtro per supportare il modello per abbreviare queste attività, il modello non ha bisogno di convertire il tipo di dati, i filtri faranno il lavoro di filtrare i dati e stampare i risultati come vogliamo. . In breve, i filtri riformattano i dati quando vengono presentati all'utente finale
Sintassi per utilizzare i filtri in angularJS:
{{expression | filter}}Il filtro viene iniettato nell'espressione tramite il carattere "|". , seguito da filtro
I filtri possono essere collegati come collegamenti consecutivi, ad esempio:
{{expression | filter | filter}}In questo caso, il primo filtro viene utilizzato per filtrare l'espressione, il secondo filtro continua a filtrare il valore del primo filtro.
Nota: il filtro non modifica il valore effettivo della variabile, cambia solo il formato di visualizzazione dell'utente finale.
Elenco dei filtri integrati in angularJS
Alcuni dei popolari filtri integrati in angularJS:
- Moneta
- Data
- Minuscolo
- Maiuscolo
- Ricerca
- …
Filtro valuta
Utilizzato per formattare la valuta per l'espressione, che verrà visualizzata all'utente nel formato valuta
Documenti: https://docs.angularjs.org/api/ng/filter/currency
Per impostazione predefinita, utilizzerà il formato Dollari USD con 2 numeri dopo il . L'esempio seguente descrive alcuni modi per utilizzare il filtro, al livello del modello html e al livello dello script, possiamo usare il filtro nel livello html o il filtro nel livello javascript, ma il modo del livello html sarà più comune:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script> </head> <body ng-app="myApp"> <div ng-controller="myController"> {{price | currency:'$ '}} <br/> {{price | currency: '$ ' : 0}} <br/> {{price2 | currency:'VND '}} <br/> <input type="number" ng-model="price3" /> <br/> {{changeprice()}} </div> </body> <script> var app = angular.module('myApp',[]); app.controller('myController',($scope,$filter) => { $scope.price = 1000; $scope.price2 = 2000; $scope.price3 = 4000; $scope.changeprice = function(){ bind_model = $filter('currency')($scope.price3, '$ ', 5); return bind_model; } }); </script> </html>Risultato durante la stampa sul browser:
Tuttavia, dal mio punto di vista, questo filtro non soddisfa VND, perché viene visualizzata la valuta del mio paese, ma VND si trova a destra del numero, quindi questo filtro non risponderà. Naturalmente c'è una soluzione, possiamo definire il nostro filtro personalizzato
Filtro data
Documenti: https://docs.angularjs.org/api/ng/filter/date
Con il filtro della data, possiamo rappresentare tutti i dati della data in base all'intenzione che desideriamo quando visualizziamo i dati sull'interfaccia.
Considera l'esempio seguente per comprendere meglio il filtro della data:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Date filter</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script> </head> <body ng-app="myApp"> <div ng-controller="myController"> {{date | date:'dd/MM/yyyy'}} </div> </body> <script> var app = angular.module('myApp',[]); app.controller('myController',($scope) => { $scope.date = Date.now(); console.log($scope.date); }); </script> </html>Risultato durante la stampa sul browser:
Vediamo, i dati del livello javascript sono timestamp che rappresentano l'ora corrente mentre stiamo scrivendo codice secondo UNIX timestamp, ma quando si stampa l'interfaccia, grazie al meccanismo di filtro di angularJS, abbiamo stampato il valore di data readable year.
Non solo, il filtro della data ha molte opzioni per aiutarti a eseguire diversi formati, leggi i documenti per capirne di più.
Minuscolo e maiuscolo
Questo filtro viene utilizzato per filtrare i dati e riformattarli in stringhe minuscole o maiuscole
{{expression | lowercase}} {{expression | uppercase}}Filtro di ricerca
I filtri vengono utilizzati per trovare i dati in un elenco, il che è abbastanza conveniente, vedere l'esempio seguente per comprendere meglio il problema:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Search filter</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script> </head> <body ng-app="myApp"> <div ng-controller="myController"> <input type="text" ng-model="search" placeholder="Search"> <table> <tr ng-repeat="x in listUser | filter:search"> <td> {{x.name}} </td> <td> {{x.age}} </td> </tr> </table> </div> </body> <script> var app = angular.module('myApp', []); app.controller('myController', ($scope) => { $scope.listUser = [ { name: "toan", age: 20 }, { name: "huy", age: 21 }, { name: "hieu", age: 22 }, { name: "toan", age: 34 }, ]; }); </script> </html>Interfaccia durante la stampa sul browser
Filtri personalizzati (filtri auto-definiti)
Se i filtri incorporati non sono sufficienti da utilizzare, possiamo definire completamente una direttiva personalizzata per filtrare come vogliamo. Sintassi per inizializzare il filtro personalizzato:
app.filter('filtername',function(){});Nell'esempio seguente, creo un filtro con il filtro utilizzato per il formato valuta VND
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script> </head> <body ng-app="myApp"> <div ng-controller="myController"> {{price | vndFilter}} </div> </body> <script> var app = angular.module('myApp', []); app.filter('vndFilter', function () { return function (x) { x = x.toString().replace(/B(?=(d{3})+(?!d))/g, ','); // convert float to string decimal thousand separator x += ' VND'; // concat with VND return x; }; }) app.controller('myController', function ($scope) { $scope.price = 5000000; }); </script> </html>Risultati quando visualizzati nel browser
