详解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的匿名函数来分析几段简单有趣的代码
Jun 29 Javascript
javascript中使用正则计算中文长度的例子
Apr 29 Javascript
jQuery如何将选中的对象转化为原始的DOM对象
Jun 09 Javascript
jQuery中ajax和post处理json的不同示例对比
Nov 02 Javascript
AngularJS基础 ng-disabled 指令详解及简单示例
Aug 01 Javascript
jQuery-mobile事件监听与用法详解
Nov 23 Javascript
React项目动态设置title标题的方法示例
Sep 26 Javascript
JS定义函数的几种常用方法小结
May 23 Javascript
微信小游戏之使用three.js 绘制一个旋转的三角形
Jun 10 Javascript
如何在JS文件中获取Vue组件
Sep 16 Javascript
Vue中使用JsonView来展示Json树的实例代码
Nov 16 Javascript
elementui实现预览图片组件二次封装
Dec 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 简单日历实现代码
2009/10/28 PHP
php 各种应用乱码问题的解决方法
2010/05/09 PHP
PHP快速导出百万级数据到CSV或者EXCEL文件
2020/11/27 PHP
JavaScript的类型简单说明
2010/09/03 Javascript
Jquery实现视频播放页面的关灯开灯效果
2013/05/27 Javascript
JS(JQuery)操作Array的相关方法介绍
2014/02/11 Javascript
动态加载iframe时get请求传递中文参数乱码解决方法
2014/05/07 Javascript
jquery中表单 多选框的一种巧妙写法
2015/09/06 Javascript
jQuery实现默认是闭合的FAQ展开效果菜单
2015/09/14 Javascript
Bootstrap每天必学之响应式导航、轮播图
2016/04/25 Javascript
js实现精确到秒的日期选择器完整实例
2016/04/30 Javascript
详解原生JavaScript实现jQuery中AJAX处理的方法
2016/05/10 Javascript
基于Vue单文件组件详解
2017/09/15 Javascript
手把手教你使用vue-cli脚手架(图文解析)
2017/11/08 Javascript
nodejs结合Socket.IO实现的即时通讯功能详解
2018/01/12 NodeJs
手写简单的jQuery雪花飘落效果实例
2018/04/22 jQuery
vue中的v-if和v-show的区别详解
2019/09/01 Javascript
jQuery实现滑动星星评分效果(每日分享)
2019/11/13 jQuery
vue项目中极验验证的使用代码示例
2019/12/03 Javascript
高性能js数组去重(12种方法,史上最全)
2019/12/21 Javascript
JQuery中DOM节点的操作与访问方法实例分析
2019/12/23 jQuery
vue.js实现简单的计算器功能
2020/02/22 Javascript
浅谈JavaScript窗体Window.ShowModalDialog使用
2020/07/22 Javascript
[06:23]2014DOTA2西雅图国际邀请赛 小组赛7月12日TOPPLAY
2014/07/12 DOTA
[02:38]2018DOTA2亚洲邀请赛赛前采访-VGJ.T
2018/04/03 DOTA
Python3安装Scrapy的方法步骤
2017/11/23 Python
Python pymongo模块常用操作分析
2018/09/01 Python
Python装饰器基础概念与用法详解
2018/12/22 Python
Python函数返回不定数量的值方法
2019/01/22 Python
python sorted函数的小练习及解答
2019/09/18 Python
python二元表达式用法
2019/12/04 Python
pycharm通过anaconda安装pyqt5的教程
2020/03/24 Python
英国豪华文具和皮具配件经典老品牌:Smythson(斯迈森)
2018/04/19 全球购物
军训自我鉴定范文
2014/02/13 职场文书
党员弘扬焦裕禄精神思想汇报
2014/09/10 职场文书
2015新员工工作总结范文
2015/10/15 职场文书