华山资源网

详解AngularJS 过滤器的使用
网络编程 2024/11/18 佚名
3 1

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

详解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直接查询到这个过滤器。

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

华山资源网 Design By www.eoogi.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
华山资源网 Design By www.eoogi.com
www.eoogi.com 华山资源网
120,135影音资源
344,641技术资源
22,817软件资源
435,032站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
华山资源网 Design By www.eoogi.com