详解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 相关文章推荐
ImageFlow可鼠标控制图片滚动
Jan 30 Javascript
js innerHTML 的一些问题的解决方法
Jun 22 Javascript
JQuery中对Select的option项的添加、删除、取值
Aug 25 Javascript
JS鼠标滑过图片时切换图片实现思路
Sep 12 Javascript
jquery实现div阴影效果示例代码
Sep 16 Javascript
深入浅析react native es6语法
Dec 09 Javascript
值得分享的Bootstrap Ace模板实现菜单和Tab页效果
Dec 30 Javascript
JS button按钮实现submit按钮提交效果
Nov 01 Javascript
vuejs通过filterBy、orderBy实现搜索筛选、降序排序数据
Oct 26 Javascript
微信小程序实现打卡日历功能
Sep 21 Javascript
微信小程序云开发(数据库)详解
May 17 Javascript
node crawler如何添加promise支持
Feb 01 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
了解Joomla 这款来自国外的php网站管理系统
2010/03/11 PHP
php清空(删除)指定目录下的文件,不删除目录文件夹的实现代码
2014/09/04 PHP
PHP对文件夹递归执行chmod命令的方法
2015/06/19 PHP
Laravel网站打开速度优化的方法汇总
2017/07/16 PHP
用jquery实现的模拟QQ邮箱里的收件人选取及其他效果(一)
2011/01/06 Javascript
使用JQuery和CSS模拟超链接的用户单击事件的实现代码
2012/05/23 Javascript
(跨浏览器基础事件/浏览器检测/判断浏览器)经验代码分享
2013/01/24 Javascript
JavaScript打印网页指定区域的例子
2014/05/03 Javascript
javascript html5实现表单验证
2016/03/01 Javascript
JQuery fileupload插件实现文件上传功能
2016/03/18 Javascript
ionic实现滑动的三种方式
2016/08/27 Javascript
JavaScript严格模式详解
2017/01/16 Javascript
使用gulp搭建本地服务器并实现模拟ajax
2017/04/05 Javascript
详解Vue2.X的路由管理记录之 钩子函数(切割流水线)
2017/05/02 Javascript
详解Vue 2.0封装axios笔记
2017/06/22 Javascript
Node.js微信 access_token ( jsapi_ticket ) 存取与刷新的示例
2017/09/30 Javascript
vue实现密码显示隐藏切换功能
2018/02/23 Javascript
axios 处理 302 状态码的解决方法
2018/04/10 Javascript
小程序图片长按识别功能的实现方法
2018/08/30 Javascript
用POSTMAN发送JSON格式的POST请求示例
2018/09/04 Javascript
Vue打包部署到Nginx时,css样式不生效的解决方式
2020/08/03 Javascript
解决vuex刷新数据消失问题
2020/11/12 Javascript
Python本地与全局命名空间用法实例
2015/06/16 Python
利用python爬取散文网的文章实例教程
2017/06/18 Python
python爬虫的数据库连接问题【推荐】
2018/06/25 Python
postman模拟访问具有Session的post请求方法
2019/07/15 Python
opencv+pyQt5实现图片阈值编辑器/寻色块阈值利器
2020/11/13 Python
python实现图片转字符画的完整代码
2021/02/21 Python
为中国消费者甄选天下优品:网易严选
2016/08/11 全球购物
Rockport乐步美国官网:风靡美国的白宫鞋
2016/11/24 全球购物
POP文化和音乐灵感的时尚:Hot Topic
2019/06/19 全球购物
兰蔻法国官方网站:Lancôme法国
2020/02/22 全球购物
工程造价专业大学生自荐信
2013/10/01 职场文书
2014年母亲节演讲稿范文
2014/05/07 职场文书
党员教师四风问题对照检查材料
2014/09/26 职场文书
会计工作能力自我评价
2015/03/05 职场文书