AngularJS 过滤器

BlackFlagBin 发布于2019-08-26 11:57 / 1550人阅读

摘要：层过滤原来是先在层分页，然后在层进行过滤，为了避免分页引起的数据过滤错误，所以决定将过滤器放到层使用，先过滤，后分页。毕竟中的字符串还是可以让他人去直接粘贴然后直接查询到这个过滤器。

小数据量查询思路

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

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

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

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

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/107908.html

Day 2: AngularJS —— 对AngularJS的初步认识

摘要：开始使用现在创建一个名为的文件，它将会是一个基于的网上书店应用。这将初始化应用程序，并告诉要在这一部分活跃。将为每个元素增加元素。控制器和视图之间的粘合剂，而且会注入到。现在我们添加书籍数组的对象到对象，这个对象对视图是可见的。编者注：我们发现了比较有趣的系列文章《30天学习30种新技术》，准备翻译，一天一篇更新，年终礼包。以下是第二天技术的译文。昨晚我完爆了一天一技术的任务...

joyqi 2019-08-19 14:24 评论0 收藏0
AngularJS简述

流行框架简介 angularjs是一款非常优秀的前端高级JS框架，由谷歌团队开发维护，能够快速构建单页web应用，化繁为简无论是angularjs还是jQuery都是用原生JS封装的库：对代码进行封装，调用封装的方法，简化操作传统方式是用get方式获取元素，然后点方法 jQuery库实现了对获取方式的封装，对方法的封装框架：提供代码书写规则，按照规则去写代码，框架会帮我们实现响应的功能...

Jason 2019-08-23 11:25 评论0 收藏0
理解和学习AngularJS（一）

摘要：为指令赋值函数名，即可运行。它也是一个对象，指向应用程序作用域内的所有元素和执行上下文。简而言之，是与指令元素相关联的当前作用域，可以理解为视图和控制器间的一个通道。它们被组织为模块形式，之后可以被另一个引用。 Angularjs Angular是一款主旋律的MVVM框架，框架和传统的库不同：类库是一些函数的集合，它能帮助你写WEB应用。起主导作用的是你的代码，由你来决定何时使用类...

EastWoodYang 2019-08-22 10:58 评论0 收藏0
你的第一个AngularJS应用

摘要：从最重要的页面开始吧锦标赛的表格。重启你的应用，看看搜索框。然后我们加入两个路由一个转向锦标赛表格，另一个转向车手详情。你所需要做的只是创建一个名为的文件，然后将锦标赛表格放在那里。结论我们已经介绍了开发一个简单应用所需的一切。 AngularJS是Google开源出来的一款 Javascript MVC 框架。利用AngularJS，你可以构建结构清晰、便于测试和维护的前端应用。 ...

shadajin 2019-08-19 14:25 评论0 收藏0