75

当我用 ng-repeat 迭代一些数组时，我想在过滤器中使用参数

例子：

HTML部分：

<tr ng-repeat="user in users | filter:isActive">

JavaScript 部分：

$scope.isActive = function(user) {
    return user.active === "1";
};

但我希望能够使用过滤器

<tr ng-repeat="user in users | filter:isStatus('4')">

但它不起作用。我怎么能做这样的事情？

4

5 回答 5

122

更新：我想我对文档的了解还不够好，但是您绝对可以使用具有这种语法的过滤器过滤器（请参阅this fiddle）按对象上的属性进行过滤：

<tr ng-repeat="user in users | filter:{status:4}">

这是我的原始答案，以防它帮助某人：

使用过滤器过滤器，您将无法传递参数，但您至少可以做两件事。

1）在范围变量中设置要过滤的数据，并在过滤器函数中引用它，就像这个小提琴一样。

JavaScript：

$scope.status = 1;
$scope.users = [{name: 'first user', status: 1},
                {name: 'second user', status: 2},
                {name: 'third user', status: 3}];

$scope.isStatus = function(user){
    return (user.status == $scope.status);
};

html:

<li ng-repeat="user in users | filter:isStatus">

或者

2）创建一个新的过滤器，它接受像这个小提琴这样的参数。

JavaScript：

var myApp = angular.module('myApp', []);
myApp.filter('isStatus', function() {
  return function(input, status) {
    var out = [];
      for (var i = 0; i < input.length; i++){
          if(input[i].status == status)
              out.push(input[i]);
      }      
    return out;
  };
});

html:

<li ng-repeat="user in users | isStatus:3">

请注意，此过滤器假定status数组中的对象中有一个属性，这可能会降低其可重用性，但这只是一个示例。您可以阅读此内容以获取有关创建过滤器的更多信息。

于 2012-08-16T23:56:50.703 回答
52

这个问题与Passing arguments to angularjs filters几乎相同，我已经给出了答案。但是我会在这里再发布一个答案，以便人们看到它。

实际上还有另一个（可能是更好的解决方案），您可以使用 Angular 的本机“过滤器”过滤器并仍然将参数传递给您的自定义过滤器。

考虑以下代码：

    <li ng-repeat="user in users | filter:byStatusId(3)">
        <span>{{user.name}}</span>
    <li>

要完成这项工作，您只需将过滤器定义如下：

$scope.byStatusId = function(statusId) {
    return function(user) {
        return user.status.id == statusId;
    }
}

这种方法更通用，因为您可以对嵌套在对象深处的值进行比较。

检查 angular.js过滤器的反向极性，了解如何将其用于过滤器的其他有用操作。

于 2013-07-23T15:05:58.573 回答
1

如果您已经创建了 AngularJs 自定义过滤器，您可以将多个参数发送到您的过滤器。这是模板中的用法

{{ variable | myFilter:arg1:arg2...  }}

如果你在控制器中使用过滤器，你可以这样做

angular.module('MyModule').controller('MyCtrl',function($scope, $filter){
    $filter('MyFilter')(arg1, arg2, ...);
})

如果您需要更多示例和在线演示，您可以使用它

AngularJs 过滤器示例和演示

于 2016-05-17T18:04:41.963 回答
0

这可能有点无关紧要，但如果您尝试使用自定义函数应用多个过滤器，您应该查看： https ://github.com/tak215/angular-filter-manager

于 2015-01-03T09:30:06.557 回答
0

示例我有一个学生列表如下：

$scope.students = [  
   { name: 'Hai', age: 25, gender: 'boy' },  
   { name: 'Hai', age: 30, gender: 'girl' },  
   { name: 'Ho', age: 25, gender: 'boy' },  
   { name: 'Hoan', age: 40, gender: 'girl' },  
   { name: 'Hieu', age: 25, gender: 'boy' }  
 ];

我想通过性别过滤学生成为男孩并按他们的名字过滤。

首先我创建了一个名为“filterbyboy”的函数，如下所示：

$scope.filterbyboy = function (genderstr) {  
   if ((typeof $scope.search === 'undefined')||($scope.search === ''))  
     return (genderstr = "")  
   else  
    return (genderstr = "boy");  
 };

说明：如果不过滤姓名，则显示所有学生，否则按输入姓名和性别过滤为“男孩”

这是完整的 HTMLcode 和演示如何在 AngularJs 示例中使用和操作符

于 2015-10-09T03:27:17.610 回答