如何在AngularJS中使用过滤器中的参数？

Question

当我用ng-repeat迭代一些数组时,我想在filter中使用参数

例:

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')">

但它不起作用.我怎么能这样做？

Answer 1

更新:我想我没有真正看好文档,但你肯定可以使用这种语法的滤镜过滤器(请参阅此小提琴)来过滤对象上的属性:

<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数组中的对象中存在可能使其不太可重用的属性,但这只是一个示例.您可以阅读此内容以获取有关创建过滤器的更多信

Answer 2

这个问题几乎与传递angularjs过滤器的参数相同,我已经给出了答案.但我要在这里再发一个答案,以便人们看到它.

实际上还有另一个(可能更好的解决方案),你可以使用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;
    }
}

这种方法更加通用,因为您可以对嵌套在对象内部的值进行比较.

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