您好,登录后才能下订单哦!
本篇文章为大家展示了如何正确的使用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 过滤器,你们学到知识或技能了吗?如果还想学到更多技能或者丰富自己的知识储备,欢迎关注亿速云行业资讯频道。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。