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?

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>

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


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


1

so was:

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

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


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]); 
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.