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

更新：我想我并没有真正查看文档，但您绝对可以使用filter过滤器使用此语法（请参阅this fiddle）进行过滤通过对象上的属性：

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

这是我原来的答案，以防有人帮助：

使用filter过滤器，您将无法传递参数，但至少可以执行两项操作。

1）在范围变量中设置您要过滤的数据，并在过滤器函数中引用该数据，如this fiddle。

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

OR

2）创建一个新的过滤器，其中包含this fiddle等参数。

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属性，这可能使其不太可重用，但这只是一个示例。有关创建过滤器的详细信息，请参阅this。

Answer 2

这个问题几乎与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;
    }
}

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

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

Answer 3

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

Answer 4

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

$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' }  
 ];

我希望通过性别过滤学生成为男孩并按名称过滤。

第一个我创建了一个名为＆＃34; filterbyboy＆＃34;的函数。如下：

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

说明：如果不是过滤器名称，则显示所有其他学生按输入名称和性别过滤为＆＃39; boy＆＃39;

这是完整的HTML代码和演示How to use and operator in AngularJs example

Answer 5

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

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

如果您在控制器中使用过滤器，那么就是如何做到这一点

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

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

AngularJs filters examples and demo

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

5 个答案: