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.