详解AngularJS 过滤器的使用

所属分类: 网络编程 / JavaScript 阅读数: 327
收藏 0 赞 0 分享

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

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

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

那就写两个接口,一个根据区域、所在单位、从事专业查询人员表,一个根据资格证名称、有效期至、区域、所在单位、从事专业查询人员资质表。不过是拼接谓语时多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直接查询到这个过滤器。

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

更多精彩内容其他人还在看

BootStrap数据表格实例代码

本文通过实例代码给大家分享了BootStrap数据表格的相关知识,感兴趣的朋友一起看看吧
收藏 0 赞 0 分享

基于vue的短信验证码倒计时demo

这篇文章主要介绍了基于vue的短信验证码倒计时demo,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

详解React Native开源时间日期选择器组件(react-native-datetime)

本篇文章主要介绍了详解React Native开源时间日期选择器组件(react-native-datetime),具有一定的参考价值,有兴趣的可以了解一下
收藏 0 赞 0 分享

JS库particles.js创建超炫背景粒子插件(附源码下载)

particles.js用于创建粒子的轻量级 JavaScript 库。使用方法非常简单,代码也很容易实现,下面通过本文给大家分享JS库particles.js创建超炫背景粒子插件附源码下载,需要的朋友参考下吧
收藏 0 赞 0 分享

JS库之Waypoints的用法详解

waypoints的功能非常强大,一款用于捕获各种滚动事件的插件,下面跟随脚本之家小编一起学习JS库之Waypoints的用法吧
收藏 0 赞 0 分享

强大的JavaScript响应式图表Chartist.js的使用

本篇文章主要介绍了强大的JavaScript响应式图表Chartist.js的使用,具有一定的参考价值,有兴趣的可以了解一下
收藏 0 赞 0 分享

详解wow.js中各种特效对应的类名

本篇文章主要介绍了wow.js中各种特效对应的类名 ,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

JS库之Highlight.js的用法详解

highlight.js是一款轻量级的Web代码语法高亮库。下面通过实例代码给大家分享JS库之Highlight.js的用法详解,感兴趣的朋友跟随脚本之家小编一起学习吧
收藏 0 赞 0 分享

详解动画插件wow.js的使用方法

本篇文章主要介绍了动画插件wow.js的使用方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

JS库 Highlightjs 添加代码行号的实现代码

Highlightjs是一款优秀的代码高亮Js组件,可以很方便地对各种语言编写的代码添加语法高亮样式。本文重点给大家介绍Highlightjs 添加代码行号的实现代码,需要的朋友参考下吧
收藏 0 赞 0 分享
查看更多