Wie rufe ich einen Angular.js-Filter mit mehreren Argumenten auf?

297

Ab der Dokumentation können wir einen Filter wie das folgende Datum aufrufen :

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

Hier ist Datum ein Filter, der ein Argument akzeptiert.

Wie lautet die Syntax zum Aufrufen von Filtern mit mehr Parametern sowohl aus Vorlagen als auch aus JavaScript-Code?

nh2
quelle

Antworten:

621

In Vorlagen können Sie Filterargumente nach Doppelpunkten trennen .

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

In Javascript nennen Sie es als

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

In den orderBy- Filterdokumenten ist tatsächlich ein Beispiel versteckt .


Beispiel:

Angenommen, Sie erstellen einen Filter, der Dinge durch reguläre Ausdrücke ersetzen kann:

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

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

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

  };
});

Aufruf einer Vorlage zum Zensieren aller Ziffern:

<p>{{ myText | regexReplace: '[0-9]':'X' }}</p>
nh2
quelle
4
In der HTML-Vorlagenbindung {{filter_expression | Filter: Ausdruck: Komparator}}, In JavaScript $ Filter ('Filter') (Filterausdruck, Ausdruck, Komparator)
Roman Sklyarov
@pulkitsinghal was meinst du? Zeigen Sie Ihren problematischen Code in JSFiddle oder Plunker.
Roman Sklyarov
Wäre schön gewesen, wenn Sie gerade den Filter in Javascript
Obi
1
@ObiOnuorah OK, habe gerade das Coffeescript in Javascript übersetzt.
nh2
1
Gutes Zeug. Warum steht diese Antwort nicht ganz oben auf der Liste?
Thethakuri
11

Ich erwähnte im Folgenden, wo ich auch den benutzerdefinierten Filter erwähnt habe, wie man diesen Filter aufruft, der zwei Parameter hat

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;
    }
});

und aus dem HTML mit der Vorlage können wir diesen Filter wie unten aufrufen

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

Wenn Sie sehen, ist hier der erste Parameter inputString und der zweite Parameter true, der mit "reverse" unter Verwendung des Symbols: kombiniert wird

Bravo
quelle
4

Wenn Sie Ihren Filter innerhalb von ng-options aufrufen möchten, lautet der Code wie folgt:

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

Dabei ist der Filter sizeWithPriceFilter und hat zwei Parameter product und productSize

Shacharsol
quelle
1

so was:

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

Wenn Sie zwei oder mehr Geschäfte mit dem Filter benötigen, können Sie diese verketten:

{{ value | decimalRound: 2 | currencySimbol: 'U$' }} 
// 11.1111 becomes U$ 11.11
Jonatas Marinho
quelle
Mögliches Duplikat: stackoverflow.com/questions/16227325/…
sjokkogutten
1
Behandelt nicht die Frage "Wie rufe ich einen Angular.js-Filter mit mehreren Argumenten auf?" (anstatt "Wie rufe ich mehrere Filter auf?")
rom99
-1

In diesem Code ist jsondata unser Array und in der Funktionsrückgabe überprüfen wir die in den jsondata vorhandene 'Version'.

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

console.log("name is " + as[0].name+as[0]); 
Gajender Singh
quelle