javascript - 将参数传递给 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 实际上返回另一个函数，该函数在其范围内包含您的参数以及来自过滤器的原始项目。

我花了 2 天时间才意识到你可以做到这一点，还没有在任何地方看到这个解决方案。

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

Answer 5

扩展pkozlowski.opensource 的答案并使用 javascriptarray's内置过滤器方法，一个美化的解决方案可能是这样的：

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

这是 jsfiddle链接。

更多关于数组过滤器的信息。

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

您也可以将动态数量的参数传递给 filter ，在这种情况下，您必须使用参数来获取这些参数。

对于一个工作演示去这里 - 将多个参数传递给角度过滤器

Answer 7

你可以简单地使用 | filter:yourFunction:arg

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

在 js 中

$scope.weDontLike = function(group) {
//here your condition/criteria
return !!group 
}