Передача аргументів у фільтри angularjs


99

Чи можна передавати аргумент функції фільтра, щоб ви могли фільтрувати за будь-яким ім'ям?

Щось на зразок

$scope.weDontLike = function(item, name) {
    console.log(arguments);
    return item.name != name;
};

Відповіді:


223

Насправді є ще одне (можливо, краще рішення), де ви можете використовувати власний фільтр 'filter' у кутовому режимі та все-таки передавати аргументи у свій спеціальний фільтр.

Розглянемо наступний код:

<div ng-repeat="group in groups">
    <li ng-repeat="friend in friends | filter:weDontLike(group.enemy.name)">
        <span>{{friend.name}}</span>
    <li>
</div>

Щоб зробити цю роботу, ви просто визначите свій фільтр наступним чином:

$scope.weDontLike = function(name) {
    return function(friend) {
        return friend.name != name;
    }
}

Як ви бачите тут, weDontLike фактично повертає іншу функцію, яка має ваш параметр у своєму обсязі, а також оригінальний елемент, що надходить з фільтра.

Мені знадобилося 2 дні, щоб зрозуміти, що ти можеш це зробити, ще не бачив цього рішення ніде.

Оформити замовлення Зворотна полярність фільтра angular.js, щоб побачити, як ви можете використовувати це для інших корисних операцій з фільтром.


Якщо ваш фільтр потребує декількох аргументів, див. Як мені викликати фільтр Angular.js з кількома аргументами?
nh2

Цей метод також вирішив дивну проблему, коли всередині ng-повтору я не міг передати власні параметри до мого фільтра. Незалежно від того, що я робив, вони продовжували повертатися як індекс, так і загальна колекція. Виконуючи цей метод повернення, я зміг передати свої параметри і все ще завантажити початковий елемент, чудово виправити!
Денніс Смолек

Ця відповідь вирішила мою проблему, коли мені не вдалося передати змінну $ range як параметр функції фільтра. НАЙКРАЩЕ рішення. Оголошено!
валафар

Якби я міг схвалити це не раз, я би переконався, що це відповідь, яка найбільше схвалюється в історії ТА. Це вже протягом багатьох років випирає лайно у мене ... і тоді я знаходжу відповідь (тепер 2 роки) ... Дякую вам неймовірно багато.
ПКД

Ще корисно у 2019 році! Дуже дякую.
ашилон

76

З того, що я розумію, ви не можете передавати аргументи функції фільтра (при використанні фільтра "filter"). Що ви повинні зробити, це написати спеціальний фільтр, як-от так:

.filter('weDontLike', function(){

return function(items, name){

    var arrayToReturn = [];        
    for (var i=0; i<items.length; i++){
        if (items[i].name != name) {
            arrayToReturn.push(items[i]);
        }
    }

    return arrayToReturn;
};

Ось робочий jsFiddle: http://jsfiddle.net/pkozlowski_opensource/myr4a/1/

Інша проста альтернатива, не записуючи спеціальні фільтри, - це зберегти ім'я для фільтрації в області застосування, а потім записати:

$scope.weDontLike = function(item) {
  return item.name != $scope.name;
};

То префект дякую! Збереження імені в області не працюватиме так добре, тому що у мене є три списки з одних і тих же даних на одній сторінці для фільтрування з різними станами (або іменами).
shapehifter

будь-яке, щоб динамічно встановити "Адам" (з посиланням на ваш JSFiddle)? здається неможливим (і, мабуть, це задумано) поєднувати ngModel і спеціальний фільтр у кутовій ...
Рольф

Чи можливо змінити параметри фільтра? Наприклад, передайте елемент другому параметру фільтра?
Пуя

Варто зазначити, що в цьому прикладі розмітка дорівнює {{items | weDontLike: 'thenameyoudontlike'}} ... зараз вам потрібно перейти до загадки, щоб отримати це. Також варто відзначити, що ви можете передати декілька парам у свій спеціальний фільтр {{items | weDontLike: 'thename': ['Я', 'масив']: 'і так далі'}} ви просто додасте більше аргументів у свій спеціальний фільтр, щоб мати доступ до них.
Бенджамін Конант

62

Насправді ви можете передати параметр ( http://docs.angularjs.org/api/ng.filter:filter ) і не потрібна спеціальна функція лише для цього. Якщо ви перепишете свій HTML як нижче, він буде працювати:

<div ng:app>
 <div ng-controller="HelloCntl">
 <ul>
    <li ng-repeat="friend in friends | filter:{name:'!Adam'}">
        <span>{{friend.name}}</span>
        <span>{{friend.phone}}</span>
    </li>
 </ul>
 </div>
</div>

http://jsfiddle.net/ZfGx4/59/


8
Так. Побічна примітка - якщо когось звуть "! Адам", ви отримуєте його як {name: '!! Adam'}.
honzajde

5
Ви також можете передавати масиви тут, як цеfilter:['Adam', 'john']
iConnor

6
jsfiddle посилання розірвано.
Seregwethrin

4
! Адам - ​​найгірше ім’я коли-небудь
Бен Вілер

6
Не-не-Адам, очевидно, гірше.
щебетати

30

Ви можете просто так зробити в Шаблоні

<span ng-cloak>{{amount |firstFiler:'firstArgument':'secondArgument' }}</span>

У фільтр

angular.module("app")
.filter("firstFiler",function(){

    console.log("filter loads");
    return function(items, firstArgument,secondArgument){
        console.log("item is ",items); // it is value upon which you have to filter
        console.log("firstArgument is ",firstArgument);
        console.log("secondArgument ",secondArgument);

        return "hello";
    }
    });

Це найкраща відповідь. Він працює з динамічними об'єктами. Це має бути прийнятою відповіддю.
абелаббеснабі

2

Розширення відповіді на pkozlowski.opensource та використання array'sметоду вбудованого JavaScript у фільтр попередньо розробленим рішенням може бути таке:

.filter('weDontLike', function(){
    return function(items, name){
        return items.filter(function(item) {
            return item.name != name;
        });
    };
});

Ось посилання jsfiddle .

Більше про фільтр Array тут .


1

Ви можете передавати декілька аргументів кутовому фільтру!

Визначення моєї кутової програми та змінної рівня додатка -

var app = angular.module('filterApp',[]);
app.value('test_obj', {'TEST' : 'test be check se'});

Ваш фільтр буде таким: -

app.filter('testFilter', [ 'test_obj', function(test_obj) {
    function test_filter_function(key, dynamic_data) {
      if(dynamic_data){
        var temp = test_obj[key]; 
        for(var property in dynamic_data){
            temp = temp.replace(property, dynamic_data[property]);
        }
        return temp;
      }
      else{
        return test_obj[key] || key;
      }

    }
    test_filter_function.$stateful = true;
    return test_filter_function;
  }]);

І з HTML ви надсилатимете такі дані, як: -

<span ng-bind="'TEST' | testFilter: { 'be': val, 'se': value2 }"></span>

Тут я надсилаю до фільтра об’єкт JSON. Ви також можете надсилати будь-які дані, такі як рядок або число.

також ви можете передавати динамічну кількість аргументів для фільтрації; у цьому випадку вам потрібно використовувати аргументи, щоб отримати ці аргументи.

Для робочої демонстраційної програми перейдіть сюди - передаючи кілька аргументів кутовому фільтру


0

Ви можете просто використовувати | filter:yourFunction:arg

<div ng-repeat="group in groups | filter:weDontLike:group">...</div>

І в js

$scope.weDontLike = function(group) {
//here your condition/criteria
return !!group 
}
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.