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

можно ли передать аргумент функции фильтра, чтобы вы могли фильтровать по любому имени?

что-то вроде 

$scope.weDontLike = function(item, name) {
    console.log(arguments);
    return item.name != name;
};
6 97
javascript angularjs angular-filters

6 ответов:

На самом деле есть еще одно (возможно, лучшее решение), где вы можете использовать собственный фильтр "фильтр" angular и по-прежнему передавать аргументы в свой пользовательский фильтр.

рассмотрим следующий код:

<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 дня, чтобы понять, что вы можете это сделать, еще нигде не видели этого решения.

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

215

из того, что я понимаю, вы не можете передать аргументы функции фильтра (при использовании фильтра "Фильтр"). То, что вам нужно сделать, это написать пользовательский фильтр, sth, как это:

.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;
};
76

на самом деле вы можете передать параметр (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/

61

Вы можете просто сделать такой В Шаблоне

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

площадью pkozlowski.ответ opensource и с помощью javascript array's встроенный метод фильтра усовершенствованное решение может быть следующим:

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

вот jsfiddle ссылке.

подробнее о фильтре массива здесь.

2

вы можете передать несколько аргументов угловой фильтр !

определение моего углового приложения и переменной уровня приложения -

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