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

How to use parameters within the filter in AngularJS?

提问by Vural

I want to use parameter in filter, when I iterate some arrays with ng-repeat

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

Example:

例子：

HTML-Part:

HTML 部分：

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

JavaScript-part:

JavaScript 部分：

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

But I want to be able to use filter like

但我希望能够使用过滤器

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

But its not working. How can I do something like that?

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

回答by Gloopy

UPDATE:I guess I didn't really look at the documentation well enough but you can definitely use the filterfilter with this syntax (see this fiddle) to filter by a property on the objects:

更新：我想我并没有真正很好地查看文档，但是您绝对可以使用具有此语法的过滤器过滤器（请参阅此小提琴）来按对象上的属性进行过滤：

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

---

---

Here's my original answer in case it helps someone:

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

Using the filterfilter you won't be able to pass in a parameter but there are at least two things you can do.

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

1) Set the data you want to filter by in a scope variable and reference that in your filter function like this fiddle.

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

JavaScript:

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) Create a new filter that takes in a parameter like this fiddle.

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

JavaScript:

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

Note this filter assumes there is a statusproperty in the objects in the array which might make it less reusable but this is just an example. You can read thisfor more info on creating filters.

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

回答by Denis Pshenov

This question is almost identical to Passing arguments to angularjs filters, to which I already gave an answer. But I'm gonna post one more answer here just so that people see it.

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

Actually there is another (maybe better solution) where you can use the angular's native 'filter' filter and still pass arguments to your custom filter.

实际上还有另一个（可能更好的解决方案），您可以在其中使用 angular 的原生“过滤器”过滤器，并且仍然将参数传递给您的自定义过滤器。

Consider the following code:

考虑以下代码：

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

To make this work you just define your filter as the following:

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

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

This approach is more versatile because you can do comparisons on values that are nested deep inside the object.

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

Checkout Reverse polarity of an angular.js filterto see how you can use this for other useful operations with filter.

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

回答by tsuz

This may be slightly irrelevant, but if you're trying to apply multiple filters with custom functions, you should look into: https://github.com/tak215/angular-filter-manager

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

回答by Lewis Hai

Example I have a students list as below :

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

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

I want to filter students via gender to be boy and filter by name of them.

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

The first I create a function named "filterbyboy" as following:

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

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

Explaination: if not filter name then display all students else filter by input name and gender as 'boy'

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

Here is full HTMLcode and demo How to use and operator in AngularJs example

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

回答by Hazarapet Tunanyan

If you have created an AngularJs custom filter, you can send multiple params to your filter.Here is usage in template

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

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

and if you use filter inside your controller here is how you can do that

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

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

if you need more with examples and online demo, you can use this

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

AngularJs filters examples and demo

AngularJs 过滤器示例和演示