Jak wywołać filtr Angular.js z wieloma argumentami?

297

Z dokumentacji możemy wywołać filtr taki jak data :

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

Tutaj data jest filtrem, który przyjmuje jeden argument.

Jaka jest składnia wywoływania filtrów z większą liczbą parametrów zarówno z szablonów, jak i kodu JavaScript?

nh2
źródło

Odpowiedzi:

621

W szablonach możesz oddzielić argumenty filtrów według dwukropków .

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

Ze strony Javascript nazywacie to jak

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

W dokumencie jest filtr ukryty przykładowo .


Przykład:

Załóżmy, że tworzysz filtr, który może zastępować wyrażenia regularne:

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

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

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

  };
});

Wywołanie w szablonie w celu cenzury wszystkich cyfr:

<p>{{ myText | regexReplace: '[0-9]':'X' }}</p>
nh2
źródło
4
W wiązaniu szablonów HTML {{filter_expression | filtr: wyrażenie: komparator}}, w JavaScript $ filter ('filter') (filter_expression, expression, comparator)
Roman Sklyarov
@pulkitsinghal co masz na myśli? Pokaż problematyczny kod w JSFiddle lub Plunker.
Roman Sklyarov
Byłoby miło, gdybyś właśnie zamieścił filtr w JavaScript
Obi
1
@ObiOnuorah OK, właśnie przetłumaczyłem Coffeescript na JavaScript.
nh2
1
Dobry towar. Dlaczego ta odpowiedź nie znajduje się na górze listy?
thethakuri
11

wspomniałem poniżej, w którym wspomniałem również o filtrze niestandardowym, jak wywołać ten filtr, który ma dwa parametry

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

a z html za pomocą szablonu możemy wywołać ten filtr jak poniżej

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

tutaj, jeśli widzisz, pierwszym parametrem jest inputString, a drugim parametrem jest prawda, który jest łączony z „odwróceniem” za pomocą symbolu:

Brawo
źródło
4

Jeśli chcesz wywołać swój filtr w opcjach ng, kod będzie wyglądał następująco:

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

gdzie filtr ma rozmiar sizeWithPriceFilter i ma dwa parametry: product i productSize

shacharsol
źródło
1

lubię to:

var items = $filter('filter')(array, {Column1:false,Column2:'Pending'});
Amay Kulkarni
źródło
0

Jeśli potrzebujesz dwóch lub więcej transakcji z filtrem, możesz je połączyć:

{{ value | decimalRound: 2 | currencySimbol: 'U$' }} 
// 11.1111 becomes U$ 11.11
Jonatas Marinho
źródło
możliwy duplikat: stackoverflow.com/questions/16227325/…
sjokkogutten 18.01.16
1
Nie odpowiada na pytanie „Jak wywołać filtr Angular.js z wieloma argumentami?” (zamiast „Jak wywołać wiele filtrów?”)
rom99
-1

W tym kodzie jsondata jest naszą tablicą, a po powrocie funkcji sprawdzamy „wersję” obecną w 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]); 
Gajender Singh
źródło