logo标签列表

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

javascriptangularjs
77

我想在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')">

但是它没有起作用。我该如何做类似的事情？

5个回答
122

更新：我想我没有仔细阅读文档，但你绝对可以使用filter过滤器并采用这种语法（参见此fiddle），以按对象上的属性进行筛选：

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

以下是我的原始回答，希望对某些人有所帮助：

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

1) 将要过滤的数据设置为作用域变量，并在您的过滤器函数中引用它，例如此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">

或

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属性，这可能会使其复用性降低，但这只是一个例子。您可以阅读此文档以了解更多有关创建过滤器的信息。

@mcranston18，我链接的这3个代码片段在最新版本的Chrome浏览器中对我来说是可行的。你遇到了什么问题？ - Gloopy
对于第二点，了解你可以从模板中传递多个参数到自定义过滤器可能会很有用。 - nh2
如果我想同时过滤“名称”和“状态”怎么办？用户可以在文本框中输入名称或状态，我希望它进行过滤。有没有什么方法，例如：filter:{status:4, name:Mark}？ - iPhoneDev
@Gloopy，你能帮我解决这个问题吗？https://dev59.com/G7r4oIgBc1ULPQZFZj6M - its me
52

这个问题与如何将参数传递给AngularJS过滤器几乎完全相同，我已经在那里给出了答案。但我会在这里再发一个答案，以便更多人看到。

实际上还有另一种（可能更好的）解决方案，在此解决方案中，您可以使用angular的本机“filter”过滤器，同时仍然向自定义过滤器传递参数。

请考虑以下代码：

    <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过滤器的极性，了解如何使用它进行其他有用的过滤操作。

由于某种奇怪的原因，这对我来说根本不起作用。在视图中有一个 ng-repeat="a in array | filter: myFilterFunc">，在控制器中有 $scope.myFilterFunc = function() {..}...但它就是不起作用。 - Clev3r
请仔细查看我的答案，你的过滤器必须返回一个函数，例如 $scope.myFilterFunc = function() { return function(item) { // 实际的过滤代码在这里 } } 并且你必须将过滤器作为函数调用，例如 filter:myFilterFunc()。 - Denis Pshenov
1
@DenisPshenov 如果我想要包括 a 和另一个值怎么办？<li ng-repeat="status in statuses | filter:currentStatus(status, scopevar.status)" ??? <-- 这个不起作用。 - Gaʀʀʏ
@Garry，那么你需要在你的过滤器中请求另一个值，例如 $scope.currentStatus = function(status, otherValue) { ... }。这是你的意思吗？ - Denis Pshenov
@DenisPshenov 我遇到的问题是在使用额外变量时，status 的可见性。我采用了不同的方法，使用 ng-model 和 ng-options。 - Gaʀʀʏ
1
如果您已经创建了一个AngularJs自定义过滤器，您可以向该过滤器发送多个参数。以下是在模板中的用法。
{{ variable | myFilter:arg1:arg2...  }}

如果您想在控制器中使用筛选器，以下是实现方法。
angular.module('MyModule').controller('MyCtrl',function($scope, $filter){
    $filter('MyFilter')(arg1, arg2, ...);
})

如果您需要更多的示例和在线演示，您可以使用这个链接：AngularJs 过滤器示例和演示。
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");  
 };

说明：如果没有过滤器名称，则显示所有学生，否则按输入的姓名和性别“男孩”进行过滤。

这里是完整的HTML代码和演示如何在AngularJs示例中使用and运算符

0
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接