详解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 相关文章推荐
jQuery源码分析之Callbacks详解
Mar 13 Javascript
Node.js事件驱动
Jun 18 Javascript
Angular ng-class详解及实例代码
Sep 19 Javascript
原生JavaScript制作计算器
Oct 16 Javascript
AngularJS的ng Http Request与response格式转换方法
Nov 07 Javascript
微信小程序中进行地图导航功能的实现方法
Jun 29 Javascript
vue路由组件按需加载的几种方法小结
Jul 12 Javascript
layui table设置某一行的字体颜色方法
Sep 05 Javascript
ES6中new Function()语法及应用实例分析
Feb 19 Javascript
从源码角度来回答keep-alive组件的缓存原理
Jan 18 Javascript
Vue项目打包部署到apache服务器的方法步骤
Feb 01 Vue.js
jQuery实现影院选座订座效果
Apr 13 jQuery
简化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的超级变量$_POST获取HTML表单(HTML Form) 数据
2011/05/07 PHP
一个PHP的QRcode类与大家分享
2011/11/13 PHP
解析PHP中ob_start()函数的用法
2013/06/24 PHP
PHP读取文件,解决中文乱码UTF-8的方法分析
2020/01/22 PHP
JavaScript 一行代码,轻松搞定浮动快捷留言-V2升级版
2010/04/02 Javascript
jquery validation验证身份证号,护照,电话号码,email(实例代码)
2013/11/06 Javascript
js实现的四级左侧网站分类菜单实例
2015/05/06 Javascript
浅谈jquery中delegate()与live()
2015/06/22 Javascript
JS模式之单例模式基本用法
2015/06/30 Javascript
js命名空间写法示例
2015/12/18 Javascript
jquery+ajax实现直接提交表单实例分析
2016/06/17 Javascript
详解微信小程序——自定义圆形进度条
2016/12/29 Javascript
Vue数据驱动模拟实现1
2017/01/11 Javascript
js时间戳和c#时间戳互转方法(推荐)
2017/02/15 Javascript
详解node中创建服务进程
2017/05/09 Javascript
JS去掉字符串末尾的标点符号及删除最后一个字符的方法
2017/10/24 Javascript
js实现内置计时器
2019/12/16 Javascript
python实现电子词典
2020/04/23 Python
python基于mysql实现的简单队列以及跨进程锁实例详解
2014/07/07 Python
python基础教程之基本数据类型和变量声明介绍
2014/08/29 Python
Python实现快速多线程ping的方法
2015/07/15 Python
web.py 十分钟创建简易博客实现代码
2016/04/22 Python
Python与人工神经网络:使用神经网络识别手写图像介绍
2017/12/19 Python
Python 限制线程的最大数量的方法(Semaphore)
2019/02/22 Python
对Python中一维向量和一维向量转置相乘的方法详解
2019/08/26 Python
Python实现名片管理系统
2020/02/14 Python
通过代码实例了解Python3编程技巧
2020/10/13 Python
纯CSS3实现的井字棋游戏
2020/11/25 HTML / CSS
Shopping happy life西班牙:以最优惠的价格提供最好的时尚配饰
2020/03/13 全球购物
信电学院毕业生自荐书
2014/05/24 职场文书
赔偿协议书范本
2014/09/12 职场文书
见义勇为事迹材料
2014/12/24 职场文书
2016年读书月活动总结范文
2016/04/06 职场文书
vue-router中hash模式与history模式的区别
2021/06/23 Vue.js
Python list列表删除元素的4种方法
2021/11/01 Python
php实现自动生成验证码的实例讲解
2021/11/17 PHP