English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Il filtro (filter), come suggerisce il nome, ha il compito di accettare un input, elaborarlo secondo una regola e restituire il risultato elaborato. È principalmente utilizzato per la formattazione dei dati, ad esempio per ottenere un sottoinsieme di un array, ordinare gli elementi di un array, ecc. ng integra alcuni filtri, tra cui: currency (moneta), date (data), filter (corrispondenza di sottostringa), json (formattazione oggetto json), limitTo (limitare il numero), lowercase (minuscolo), uppercase (maiuscolo), number (numero), orderBy (ordinamento). In totale ci sono nove. Inoltre, è possibile definire filtri personalizzati, il che è molto potente e può soddisfare qualsiasi esigenza di elaborazione dei dati.
Il contenuto del filtro è molto semplice, è sufficiente capire come utilizzare i filtri integrati e come definire un filtro personalizzato per essere a posto ~ Oggi ho studiato il sistema, farò una presentazione.
Due metodi di utilizzo del filtro
1. Utilizzo del filtro nel template
Possiamo utilizzare direttamente il filtro in {{}}, separato dall'espressione con il simbolo |, la sintassi è la seguente:
{{ expression | filter }}
Anche più filtri possono essere utilizzati insieme, l'output del filtro precedente viene utilizzato come input per il filtro successivo (non è un caso che assomigli a un tubo...)
{{ expression | filter1 | filter2 | ... }}
Il filtro può accettare parametri, i parametri sono divisi da :, ad esempio：
{{ expression | filter:argument1:argument2:... }}
Oltre a formattare i dati tra {{}}, possiamo utilizzare filtri nelle direttive, ad esempio, prima di filtrare l'array array e poi esportare in un ciclo:
<span ng-repeat="a in array | filter ">
2. Utilizzo del filtro nel controller e nel servizio
Il nostro codice JavaScript può anche utilizzare filtri, il metodo è la dipendenza di iniezione che conosciamo bene, ad esempio, se devo utilizzare il filtro currency nel controller, devo semplicemente iniettarlo nel controller, il codice è il seguente：
app.controller('testC',function($scope,currencyFilter){
$scope.num = currencyFilter(123534);
}
Utilizzando {{num}} nel template è possibile esportare direttamente $123,534.00! Utilizzare filtri nei servizi è lo stesso principio.
Potresti avere dei dubbi, se devo utilizzare più filtri nel controller, devo iniettarli uno per uno, non è troppo faticoso? Amico, non preoccuparti~ng fornisce un servizio $filter per chiamare i filtri necessari, è sufficiente iniettare uno $filter, il metodo di utilizzo è il seguente：
app.controller('testC',function($scope,$filter){
$scope.num = $filter('currency')(123534);
$scope.date = $filter('date')(new Date());
}
Può raggiungere lo stesso effetto. Il vantaggio è che puoi utilizzare diversi filtri con facilità.
Filtri integrati di ng
ng include un totale di nove filtri, i metodi di utilizzo sono molto semplici, leggere il documento è sufficiente. Tuttavia, per evitare di cercare il documento in futuro, ho ancora fatto una registrazione dettagliata qui.
1. elaborazione della moneta (currency)
Utilizzando currency è possibile formattare un numero come moneta, il simbolo predefinito è il dollaro, è possibile passare il simbolo desiderato, ad esempio ho inserito il renminbi:
{{num | currency : '￥'}}
2. formattazione della data (date)
La capacità di formattazione della data del JavaScript nativo è limitata, il filtro date fornito da ng può基本上满足一般的格式化要求。用法如下：
{{date | date : 'yyyy-MM-dd hh:mm:ss EEEE'}}
Il parametro viene utilizzato per specificare il formato desiderato, y M d h m s E rappresenta anno mese giorno ora minuto secondo giorno della settimana, puoi combinare liberamente. Puoi anche utilizzare un numero diverso per limitare il numero di cifre del formato. Inoltre, il parametro può anche utilizzare stringhe descrittive specifiche, ad esempio, 'shortTime' formatterà l'ora come 12:05 pm. Ng fornisce otto stringhe descrittive, penso che siano un po 'inutili, posso combinare a mio piacere il formato desiderato, non voglio ricordare così tanti vocaboli ~
3. filter(corrispondenza sottostringa)
Questo chiamato filter (deve ammettere che il nome è stato scelto, è facile confondersi - !) viene utilizzato per trattare un array, quindi può filtrare gli elementi che contengono una sottostringa e restituirli come un sottogruppo. Può essere un array di stringhe o un array di oggetti. Se è un array di oggetti, può corrispondere al valore dell'attributo. Accetta un parametro per definire le regole di corrispondenza della sottostringa. Ecco un esempio per illustrare l'uso del parametro, ho definito un array con alcuni bambini particolarmente popolari ora:
$scope.childrenArray = [
{name:'kimi',age:3},
{name:'cindy',age:4},
{name:'anglar',age:4},
{name:'shitou',age:6},
{name:'tiantian',age:5}
;
$scope.func = function(e){return e.age>4;}
{{ childrenArray | filter : 'a' }} // Corrisponde all'attributo valore che contiene a
{{ childrenArray | filter : 4 }} // Corrisponde all'attributo valore che contiene 4
{{ childrenArray | filter : {name : 'i'} }} // Il parametro è un oggetto, corrisponde all'attributo name che contiene i
{{childrenArray | filter : func }} // Il parametro è una funzione, specifica il ritorno di age>4
4. json(formattazione oggetto JSON)
Il filtratore JSON può formattare un oggetto JS in una stringa JSON, senza parametri. A cosa serve questa cosa, di solito non esco una stringa JSON su una pagina, il sito ufficiale dice che può essere utilizzato per il debug, sì, è una buona scelta. Oppure, può anche essere utilizzato in JS, il suo ruolo è lo stesso del familiare JSON.stringify(). L'uso è estremamente semplice:
{{ jsonTest | json}}
5. limitTo(Limitare la lunghezza dell'array o della stringa)
Il filtro limitTo viene usato per tagliare un array o una stringa, accetta un parametro per specificare la lunghezza da tagliare, se il parametro è negativo, viene tagliato dall'estremità dell'array. Penso che questo filtro sia un po' inutile, perché può solo tagliare dall'inizio o dalla fine dell'array o della stringa, e può essere sostituito da funzioni native di js. Vediamo come usarlo:
{{ childrenArray | limitTo : 2 }} //Mostra i primi due elementi dell'array
6. lowercase(Minuscolo)
Converti i dati in minuscolo. È molto semplice, non c'è bisogno di spiegare molto. È anche un filtro molto inutile, senza parametri, può solo convertire l'intera stringa in minuscolo, non può specificare le lettere. Non ho nemmeno la voglia di scrivere come usarlo.
7. uppercase(Maiuscolo)
Come sopra.
8. number(Formattazione numero)
Il filtro number può aggiungere la virgola decimale a un numero, come questo, 123.456.789. Accetta anche un parametro che può specificare quante cifre decimali mantenere:
{{ num | number : 2 }}
9. orderBy(Ordinamento)
Il filtro orderBy può ordinare gli elementi di un array, accetta un parametro per specificare le regole di ordinamento, il parametro può essere una stringa che indica di ordinare per il nome dell'attributo. Può essere una funzione che definisce l'attributo di ordinamento. Può anche essere un array che indica di ordinare in base ai valori degli attributi nell'ordine (se i valori del primo attributo sono uguali, viene ordinato per il secondo). Prendiamo ancora l'esempio dell'array dei bambini:
<div>{{ childrenArray | orderBy : 'age' }}</div> //Viene ordinato per il valore dell'attributo age, se è -age, viene ordinato in senso inverso
<div>{{ childrenArray | orderBy : orderFunc }}</div> //Viene ordinato in base al valore restituito dalla funzione
<div>{{ childrenArray | orderBy : ['age','name'] }}</div> //Se l'età è la stessa, viene ordinato per nome
La presentazione dei filtri integrati è finita, mi sono quasi addormentato... Come puoi vedere, i filtri integrati di ng non sono assolutamente万能的, di fatto molti sono piuttosto inutili. Per esigenze più personalizzate dobbiamo definire i nostri filtri personalizzati. Vediamo come fare.
Filtro personalizzato
Il modo di personalizzare i filtri è anche molto semplice, utilizzare il metodo filter del modulo, restituire una funzione, che accetta il valore di input e restituisce il risultato elaborato. Senza dilungarci, vediamo un esempio. Ad esempio, ho bisogno di un filtro che restituisca gli elementi con indici dispari di un array, il codice è il seguente:
app.filter('odditems',function(){
return function(inputArray){
var array = [];
for(var i=0;i<inputArray.length;i++){
if(i%2!==0){
array.push(inputArray[i]);
}
}
return array;
}
});
Il formato è così, la vostra logica di elaborazione è scritta nella funzione di chiusura interna. Puoi anche far passare parametri al tuo filtro, che vengono definiti nella funzione return come secondo parametro, o anche più parametri.
Le basi dei filtri sono queste. È sempre la stessa cosa, più bisogno di imparare è ancora la vera prova del progetto. Quindi, prima che il progetto arrivi, prepariamoci bene le basi~
Questo è tutto il contenuto dell'articolo, speriamo che sia utile per la vostra apprendimento, e speriamo che tutti sosteniate il tutorial urla.
Dichiarazione: il contenuto di questo articolo è stato tratto da Internet, il copyright spetta ai rispettivi autori, il contenuto è stato contribuito e caricato autonomamente dagli utenti di Internet, questo sito non detiene i diritti di proprietà, non è stato sottoposto a editing umano e non assume responsabilità legali correlate. Se trovi contenuti sospetti di violazione del copyright, è possibile inviare una e-mail a: notice#oldtoolbag.com (al momento dell'invio dell'e-mail, sostituisci # con @) per segnalare, fornendo prove pertinenti. Una volta verificata, questo sito rimuoverà immediatamente il contenuto sospetto di violazione del copyright.