Як мені викликати фільтр Angular.js з кількома аргументами?


297

З документації ми можемо викликати такий фільтр, як дата такої:

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

Тут дата - це фільтр, який бере один аргумент.

Який синтаксис викликати фільтри з більшою кількістю параметрів як із шаблонів, так і з коду JavaScript?

Відповіді:


621

У шаблонах можна розділити аргументи фільтру за двокрапками .

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

З Javascript ви називаєте це як

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

Насправді є приклад, прихований у документах фільтрів orderBy .


Приклад:

Скажімо, ви робите фільтр, який може замінити речі звичайними виразами:

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

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

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

  };
});

Запрошення в шаблон для цензури всіх цифр:

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

4
У прив'язці шаблонів HTML {{filter_expression | filter: izraz: компаратор}}, In JavaScript $ filter ('filter') (filter_expression, izraz, компаратор)
Роман Скляров

@pulkitsinghal що ти маєш на увазі? Покажіть свій проблемний код у JSFiddle або Plunker.
Роман Скляров

Було б добре, якби ви тільки що опублікували фільтр у Javascript
Obi,

1
@ObiOnuorah Добре, щойно переклав Coffeescript у Javascript.
nh2

1
Хороший матеріал. Чому ця відповідь не знаходиться вгорі списку?
thethakuri

11

я згадував у нижченаведеному, де я також згадав про власний фільтр також, як викликати цей фільтр, який має два параметри

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

і з HTML за допомогою шаблону ми можемо викликати цей фільтр, як показано нижче

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

тут, якщо бачите, першим параметром є inputString, а другий параметр true, який поєднується з "reverse" за допомогою символу:


4

Якщо ви хочете викликати свій фільтр всередині ng-параметрів, код буде таким:

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

де фільтр має розмірWithPriceFilter, і він має два параметри product і sizeSize



0

Якщо вам потрібні дві або більше взаємозв'язків з фільтром, можливо їх ланцюг:

{{ value | decimalRound: 2 | currencySimbol: 'U$' }} 
// 11.1111 becomes U$ 11.11

можливо дублікат: stackoverflow.com/questions/16227325 / ...
sjokkogutten

1
Не стосується питання "Як мені викликати фільтр Angular.js з кількома аргументами?" (а не "Як мені викликати кілька фільтрів?")
rom99

-1

У цьому коді, jsondata - це наш масив, і у поверненні функції ми перевіряємо 'версію', присутню в 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]); 
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.