如何正确的使用AngularJS过滤器-创新互联
本篇文章为大家展示了如何正确的使用AngularJS 过滤器，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。
考评员综合查询，查询条件有：区域、所在单位、从事专业、资格证名称、有效期至。
如果我们的所有数据查询都放在后台的话。依据拼接的查询条件，选择区域、所在单位、从事专业查询的是人员表，而选择资格证名称、有效期至查询的是人员资质表。
过滤器思路
过滤器，本质就是一个方法，输入什么，然后输出什么。
符合此处需求传入的参数应该为人员，资格证名称，有效期至，然后输出为处理过的人员。
过滤人员的人员资质，可能对于不熟悉本项目的人不容易理解，所以这里以人和电脑为例，一个人，可以有多个电脑，需求是将这个人的不符合过滤条件的电脑从数组中移除。
webApp.filter('yunzhiComputer', function() {
return function(users, computerName) {
angular.forEach(users, function(user) {
angular.forEach(user.computers, function(computer, index) {
if (computer.name !== computerName) {
// 如果不符合条件，将该项从数组中移除
user.computers.splice(index, 1);
}
});
});
return users;
};
});ng-repeat="user in users | yunzhiComputer: 'Mac'"
V层过滤的问题
因为此处的考评员查询需要进行分页，因为数据量较少，所以计划在前台分页。
分页之后，那循环中的users就是我们分页完的人。
假如一共有两页数据，每页十条，第一页有一条符合的，第二页有三条符合的，如果使用者在第一页进行过滤，那最后显示出来的就是一条数据，显示不出第二页符合条件的数据。
C层过滤
原来是先在C层分页，然后在V层进行过滤，为了避免分页引起的数据过滤错误，所以决定将过滤器放到C层使用，先过滤，后分页。
Filter - AngularJS
angular.module('FilterInControllerModule', []).
controller('FilterController', ['filterFilter', function FilterController(filterFilter) {
this.array = [
{name: 'Tobias'},
{name: 'Jeff'},
{name: 'Brian'},
{name: 'Igor'},
{name: 'James'},
{name: 'Brad'}
];
this.filteredArray = filterFilter(this.array, 'a');
}]);第一种是AngularJS官方给出的写法，直接过滤器名加上Filter可以直接依赖注入过滤器，例如我们这里的过滤器叫做yunzhiComputer，我们可以直接依赖注入yunzhiComputerFilter。
How to use a filter in a controller - StackOverflow
function myCtrl($scope, $filter)
{
$filter('filtername')(arg1,arg2);
}这是StackOverflow上给出的写法，我比较喜欢这种写法，毕竟我们写过滤器，为了防止和已有的库冲突，所以我们要将过滤器加上前缀yunzhi，然后还要在命名上大致描述这个过滤器的功能，这就使得过滤器的名称很长，再加上Filter，那就更长了，完全没必要。毕竟$filter中的字符串还是可以让他人去直接粘贴然后Ctrl + P直接查询到这个过滤器。
上述内容就是如何正确的使用AngularJS 过滤器，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注创新互联成都网站设计公司行业资讯频道。
另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。
本文标题：如何正确的使用AngularJS过滤器-创新互联
文章链接：http://azwzsj.com/article/dcphgs.html
