详解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 相关文章推荐
通过JAVASCRIPT读取ASP设定的COOKIE
Feb 15 Javascript
javascript移出节点removeChild()使用介绍
Apr 03 Javascript
jQuery中[attribute!=value]选择器用法实例
Dec 31 Javascript
jquery插件unobtrusive实现片段式加载
Jun 15 Javascript
使用Bootstrap + Vue.js实现表格的动态展示、新增和删除功能
Nov 27 Javascript
webpack vue 项目打包生成的文件,资源文件报404问题的修复方法(总结篇)
Jan 09 Javascript
JS封装的模仿qq右下角消息弹窗功能示例
Aug 22 Javascript
详解如何用VUE写一个多用模态框组件模版
Sep 27 Javascript
JavaScript中的类型检查
Feb 03 Javascript
js中!和!!的区别与用法
May 09 Javascript
vue接通后端api以及部署到服务器操作
Aug 13 Javascript
vue实现井字棋游戏
Sep 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登陆页的密码处理方式分享
2013/10/14 PHP
php中类和对象:静态属性、静态方法
2017/04/09 PHP
PHP实现ASCII码与字符串相互转换的方法
2017/04/29 PHP
javascript getElementsByClassName 和js取地址栏参数
2010/01/02 Javascript
JavaScript中使用构造函数实现继承的代码
2010/08/12 Javascript
jsTree 基于JQuery的排序节点 Bug
2011/07/26 Javascript
Javascript变量函数浅析
2011/09/02 Javascript
游览器中javascript的执行过程(图文)
2012/05/20 Javascript
javascript制作的网页侧边弹出框思路及实现代码
2014/05/21 Javascript
js创建一个input数组并绑定click事件的方法
2014/06/12 Javascript
Ext GridPanel加载完数据后进行操作示例代码
2014/06/17 Javascript
jquery插件splitScren实现页面分屏切换模板特效
2015/06/16 Javascript
Javascript的比较汇总
2016/07/25 Javascript
jquery对象与DOM对象转化
2017/02/08 Javascript
jQuery实现动态生成表格并为行绑定单击变色动作的方法
2017/04/17 jQuery
浅谈React深度编程之受控组件与非受控组件
2017/12/26 Javascript
Vuex提升学习篇
2018/01/11 Javascript
Vue下拉框回显并默认选中随机问题
2018/09/06 Javascript
python按照多个字符对字符串进行分割的方法
2015/03/17 Python
Django实现快速分页的方法实例
2017/10/22 Python
Win10 安装PyCharm2019.1.1(图文教程)
2019/09/29 Python
python实现猜数字游戏
2020/03/25 Python
如何将 awk 脚本移植到 Python
2019/12/09 Python
解决Pycharm 运行后没有输出的问题
2021/02/05 Python
使用CSS实现阅读进度条
2017/02/27 HTML / CSS
Steve Madden官网:美国鞋类品牌
2017/01/29 全球购物
美丽的现代设计家具:2Modern
2018/07/26 全球购物
Hudson Jeans官网:高级精制牛仔裤
2018/11/28 全球购物
Ray-Ban雷朋太阳眼镜英国官网:Ray-Ban UK
2019/11/23 全球购物
简述synchronized和java.util.concurrent.locks.Lock的异同
2014/12/08 面试题
高中生学习的自我评价
2013/12/14 职场文书
需求分析说明书
2014/05/09 职场文书
银行优秀员工推荐信
2015/03/24 职场文书
开学第一周值周总结
2015/07/16 职场文书
Win11 KB5015814遇安装失败 影响开始菜单性能解决方法
2022/07/15 数码科技
pytest实现多进程与多线程运行超好用的插件
2022/07/15 Python