如何在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过滤示例和演示