将参数传递给angularjs过滤器

Question

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

就像是

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

Answer 1

实际上还有另一个(可能更好的解决方案),你可以使用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实际上返回了另一个函数,它在你的作用域中有你的参数以及来自过滤器的原始项.

我花了两天时间才意识到你可以做到这一点,还没有在任何地方见过这个解决方案.

Checkout angular.js过滤器的反极性,看看如何将其用于带过滤器的其他有用操作.

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

你可以简单地在模板中这样做

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