如何在AngularJS的filter中使用参数?

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

例:

HTML的部分:

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

JavaScript的部分:

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

但是我想能够使用filter

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

但它不工作。 我怎么能这样做?

更新:我想我没有看足够好的文档,但你可以肯定地使用这个语法的filterfilter(看这个小提琴 )过滤对象的属性:

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

这是我的原始答案,以帮助某人:

使用filterfilter将不能传入参数,但至less有两件事情可以做。

1)将你想要过滤的数据设置在一个范围variables中,并像你这个小提琴那样引用你的filter函数。

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)创build一个新的filter,像这个小提琴一样接受一个参数。

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

请注意,此filter假定数组中的对象中有一个status属性,可能使其不能重复使用,但这只是一个示例。 你可以阅读这个关于创buildfilter的更多信息。

这个问题几乎和将parameter passing给angularjsfilter一样 ,我已经给出了答案。 但是我会在这里发布一个更多的答案,让人们看到它。

其实有另一个(也许更好的解决scheme),你可以使用angular的本地“filter”filter,仍然传递参数到您的自定义filter。

考虑下面的代码:

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

为了使这个工作,你只需定义你的filter如下:

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

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

Checkout angular.jsfilter的极性反转,以了解如何将其用于其他有用的filter操作。

这可能稍微不相关,但是如果您尝试使用自定义函数应用多个filter,则应该查看: https : //github.com/tak215/angular-filter-manager

示例我有一个学生名单如下:

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

我想通过性别筛选学生是男孩,并按他们的名字过滤。

首先我创build一个名为“filterbyboy”的函数,如下所示:

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

解释:如果不是filter名称,则显示所有学生按input名称和性别过滤为“男孩”

这里是完整的HTMLcode和演示如何在AngularJs中使用和运算符的例子

如果您创build了AngularJs自定义filter,则可以将多个参数发送到您的filter。这里是模板中的用法

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

如果你在你的控制器里面使用filter,你可以这样做

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

如果你需要更多的例子和在线演示,你可以使用这个

AngularJs过滤示例和演示