详解AngularJS 过滤器的使用


Posted in Javascript onJune 02, 2018

考评员综合查询,查询条件有:区域、所在单位、从事专业、资格证名称、有效期至。

详解AngularJS 过滤器的使用

如果我们的所有数据查询都放在后台的话。依据拼接的查询条件,选择区域、所在单位、从事专业查询的是人员表,而选择资格证名称、有效期至查询的是人员资质表。

详解AngularJS 过滤器的使用

查询都放到后台,这种以我们固有的思路去设计是可以实现的。

那就写两个接口,一个根据区域、所在单位、从事专业查询人员表,一个根据资格证名称、有效期至、区域、所在单位、从事专业查询人员资质表。不过是拼接谓语时多join几下罢了。

然后前台监听用户选中的查询条件,根据不同的查询条件去请求相应的接口。

虽然这样可以实现,但是此处的考评员的数量不会很多,我们大可以根据区域、所在单位、从事专业查询人员,OneToMany直接将相应的人员资质带出来,然后再根据用户选中的资格证名称和有效期至作为条件对人员资质进行过滤,在前台过滤出用户想要的数据。

过滤器思路

过滤器,本质就是一个方法,输入什么,然后输出什么。

符合此处需求传入的参数应该为人员,资格证名称,有效期至,然后输出为处理过的人员。

过滤人员的人员资质,可能对于不熟悉本项目的人不容易理解,所以这里以人和电脑为例,一个人,可以有多个电脑,需求是将这个人的不符合过滤条件的电脑从数组中移除。

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直接查询到这个过滤器。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
php gethostbyname获取域名ip地址函数详解
Jan 24 Javascript
一个JQuery写的点击上下滚动的小例子
Aug 27 Javascript
Javascript变量函数浅析
Sep 02 Javascript
在javascript中对于DOM的加强
Apr 11 Javascript
javascript闭包入门示例
Apr 30 Javascript
使用jQuery.Qrcode插件在客户端动态生成二维码并添加自定义Logo
Sep 01 Javascript
BootStrap tab选项卡使用小结
Aug 09 Javascript
深入探究AngularJs之$scope对象(作用域)
Jul 20 Javascript
vue-ajax小封装实例
Sep 18 Javascript
vue中使用better-scroll实现滑动效果及注意事项
Nov 15 Javascript
js实现无限瀑布流实例方法
Sep 16 Javascript
vue 组件间的通信之子组件向父组件传值的方式
Jul 29 Javascript
简化vuex的状态管理方案的方法
Jun 02 #Javascript
深入了解javascript 数组的sort方法
Jun 01 #Javascript
js 数组详细操作方法及解析合集
Jun 01 #Javascript
vue 中动态绑定class 和 style的方法代码详解
Jun 01 #Javascript
一个简单的node.js界面实现方法
Jun 01 #Javascript
浅析前端路由简介以及vue-router实现原理
Jun 01 #Javascript
Vue中的混入的使用(vue mixins)
Jun 01 #Javascript
You might like
PHP FOR MYSQL 代码生成助手(根据Mysql里的字段自动生成类文件的)
2011/07/23 PHP
php json相关函数用法示例
2017/03/28 PHP
JQuery下关于$.Ready()的分析
2009/12/13 Javascript
深入理解JavaScript系列(6) 强大的原型和原型链
2012/01/15 Javascript
13 个JavaScript 性能提升技巧分享
2012/07/26 Javascript
jQuery实现简单下拉导航效果
2015/09/07 Javascript
基于jquery实现左右按钮点击的图片切换效果
2021/01/27 Javascript
jquery 点击元素后,滚动条滚动至该元素位置的方法
2016/08/05 Javascript
AngularJS equal比较对象实例详解
2016/09/14 Javascript
谈谈target=_new和_blank的不同之处
2016/10/25 Javascript
js中小数向上取整数,向下取整数,四舍五入取整数的实现(必看篇)
2017/02/13 Javascript
JS jQuery使用正则表达式去空字符的简单实现代码
2017/05/20 jQuery
Vue render渲染时间戳转时间,时间转时间戳及渲染进度条效果
2018/07/27 Javascript
详解vue 兼容IE报错解决方案
2018/12/29 Javascript
微信小程序上传图片到php服务器的方法
2019/05/23 Javascript
javascript实现的字符串转换成数组操作示例
2019/06/13 Javascript
文章或博客自动生成章节目录索引(支持三级)的实现代码
2020/05/10 Javascript
vue使用keep-alive实现组件切换时保存原组件数据方法
2020/10/30 Javascript
[38:32]DOTA2上海特级锦标赛A组资格赛#2 Secret VS EHOME第二局
2016/02/26 DOTA
详解用Python处理HTML转义字符的5种方式
2017/12/27 Python
python中kmeans聚类实现代码
2018/02/23 Python
对python中数组的del,remove,pop区别详解
2018/11/07 Python
HTML5之HTML元素扩展(下)—增强的Form表单元素值得关注
2013/01/31 HTML / CSS
全球最大的服务市场:Fiverr
2017/01/03 全球购物
Giuseppe Zanotti美国官方网站:将鞋履视为高级时装般精心制作
2018/02/06 全球购物
美国最大的高尔夫发球时间预订网站:TeeOff.com
2018/03/28 全球购物
Foot Locker加拿大官网:美国知名运动产品零售商
2019/07/21 全球购物
电话销售经理岗位职责
2013/12/07 职场文书
写自荐信三大法宝
2014/01/24 职场文书
企业宣传标语
2014/06/09 职场文书
2014年数学教研组工作总结
2014/12/06 职场文书
幼儿园教师个人总结
2015/02/05 职场文书
该怎么书写道歉信?
2019/07/03 职场文书
SpringBoot2 参数管理实践之入参出参与校验的方式
2021/06/16 Java/Android
navicat 连接Ubuntu虚拟机的mysql的操作方法
2022/04/02 MySQL
以下牛机,你有几个
2022/04/05 无线电