将参数传递给angularjs过滤器

Question

是否可以将参数传递给过滤器函数，以便可以按任何名称进行过滤？

喜欢的东西

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

Answer 1

其实还有另外一个（也许更好的解决方案），您可以使用角度的本地“过滤器”过滤器，并且仍然将参数传递给你的定制过滤器。

考虑下面的代码：

<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天才意识到你可以做到这一点，还没有看到任何地方的解决方案。

结帐Reverse polarity of an angular.js filter了解如何将其用于过滤器的其他有用操作。

Answer 2

从我的理解（使用“过滤器”过滤器时），你不能传递一个参数的过滤功能。你必须做的是写一个自定义过滤器，某事像这样：

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

Answer 3

其实你可以传递参数（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/

Answer 4

扩展上pkozlowski.opensource's answer和使用javascript array's内置过滤方法的美化解决方案是这样的：

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

这里的的jsfiddle link。

更多关于阵列过滤器here。

Answer 5

你可以简单地做这样的 模板

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

Answer 6

可以多个参数传递到角过滤！

定义我的角度应用程序，以及一个应用程序级的变量 -

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对象到过滤器。 您也可以发送任何类型的数据，如字符串或数字。

，你也可以通过动态数量的参数中，你必须使用参数得到这些参数的话来过滤， 。

对于工作演示去这里 - passing multiple arguments to angular filter