什么是 AngularJs 过滤器？
从数组中选择项目的子集并将其作为新数组返回。
过滤器在许多方面与工厂或者服务非常相似。
但它有一个另外的优势，即一旦创建就在全局范围内运行。
正如我们之前所见，我们可以对 HTML 中的数据绑定或者直接在控制器或者指令中调用过滤器。
AngularJs 过滤器的基本用法
在 HTML 模板绑定中
[[ filter_expression | filter : expression : comparator ]] <!-- AngularJs Print Symbols are Interpolated to '[[', ']]'-->
在 JavaScript 中
$filter('filter')(array, expression, comparator)
AngularJs 自定义过滤器
如我们所知，AngularJs 允许我们创建自定义过滤器并像使用其他过滤器一样使用它。
为此，我们可以使用 filter(...) 函数在模块内部创建过滤器。
让我们看看如何创建自定义过滤器的语法筛选。
angular.module('MyModule').filter('myFilter', function() {
return function(input, arg1, arg2) {
var output;
//code ...
return output;
}
});
你可以在你的控制器、指令等中使用这个过滤器，或者在你的模板中使用我们给你的语法。
现在我们将创建一个过滤器（演示），它允许我们按用户列表的性别进行过滤。
<!DOCTYPE html>
<html>
<head>
<title>www.onitroad.com</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
</head>
<body data-ng-app="MyModule" data-ng-controller="MyController">
<select data-ng-model="filterGender">
<option value='male'>Male</option>
<option value='female'>Female</option>
</select>
<ul>
<li data-ng-repeat="user in users | gender:filterGender" data-ng-bind="user.name"></li>
</ul>
<script>
angular.module('MyModule', [])
.controller('MyController', function($scope){
$scope.users = [
{name: 'Mike', gender: 'male', age: 23},
{name: 'Jenifer', gender: 'female', age: 32},
{name: 'Tom', gender: 'male', age: 14},
{name: 'Hayk', gender: 'male', age: 18},
{name: 'Eliana', gender: 'female', age: 28}
];
})
.filter('gender', function(){
return function(users, gender){
if(!gender){
return users;
}
var arr = [];
angular.forEach(users, function(v){
if(v.gender === gender){
arr.push(v);
}
})
return arr;
}
})
</script>
</body>
</html>
日期：2020-06-02 22:18:47 来源：oir作者：oir