Come posso chiamare un filtro Angular.js con più argomenti?


297

A partire dalla documentazione , possiamo chiamare un filtro come la data come questa:

{{ myDateInScope | date: 'yyyy-MM-dd' }}

Qui date è un filtro che accetta un argomento.

Qual è la sintassi per chiamare i filtri con più parametri sia dai modelli che dal codice JavaScript?

Risposte:


621

Nei template, puoi separare gli argomenti del filtro in due punti .

{{ yourExpression | yourFilter: arg1:arg2:... }}

Da Javascript, lo chiami come

$filter('yourFilter')(yourExpression, arg1, arg2, ...)

In realtà c'è un esempio nascosto nei documenti del filtro orderBy .


Esempio:

Diciamo che crei un filtro in grado di sostituire le cose con espressioni regolari:

myApp.filter("regexReplace", function() { // register new filter

  return function(input, searchRegex, replaceRegex) { // filter arguments

    return input.replace(RegExp(searchRegex), replaceRegex); // implementation

  };
});

Invocazione in un modello per censurare tutte le cifre:

<p>{{ myText | regexReplace: '[0-9]':'X' }}</p>

4
Nell'associazione di modelli HTML {{filter_expression | filtro: espressione: comparatore}}, in JavaScript $ filtro ('filtro') (espressione_filtro, espressione, comparatore)
Roman Sklyarov

@pulkitsinghal che vuoi dire? Mostra il tuo codice problematico in JSFiddle o Plunker.
Roman Sklyarov,

Sarebbe stato carino se avessi pubblicato il filtro in Javascript
Obi

1
@ObiOnuorah OK, ho appena tradotto il Coffeescript in Javascript.
nh2,

1
Roba buona. Perché questa risposta non è in cima all'elenco?
thethakuri,

11

ho citato di seguito in cui ho citato anche il filtro personalizzato, come chiamare questi filtri che hanno due parametri

countryApp.filter('reverse', function() {
    return function(input, uppercase) {
        var out = '';
        for (var i = 0; i < input.length; i++) {
            out = input.charAt(i) + out;
        }
        if (uppercase) {
            out = out.toUpperCase();
        }
        return out;
    }
});

e dall'html usando il modello possiamo chiamare quel filtro come sotto

<h1>{{inputString| reverse:true }}</h1>

qui se vedi, il primo parametro è inputString e il secondo parametro è true che viene combinato con "reverse" usando il simbolo:


4

Se vuoi chiamare il tuo filtro all'interno di ng-options il codice sarà il seguente:

ng-options="productSize as ( productSize | sizeWithPrice: product )  for productSize in productSizes track by productSize.id"

dove il filtro è sizeWithPriceFilter e ha due parametri product e productSize


1

come questo:

var items = $filter('filter')(array, {Column1:false,Column2:'Pending'});


-1

In questo codice, jsondata è il nostro array e nella funzione return stiamo verificando la 'versione' presente in jsondata.

var as = $filter('filter')(jsondata, function (n,jsondata){
   return n.filter.version==='V.0.3'
});

console.log("name is " + as[0].name+as[0]); 
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.