一. 过滤器基础

过滤器用于在视图中格式化展现给用户的数据. 一旦定义过滤器之后, 就可在整个模块中全面应用, 也就意味着可以用来保证跨多个控制器和视图之间的数据展示的一致性.

过滤器将数据在被指令处理并显示到视图中之前进行转换, 而不必修改作用域中原有的数据, 这样能够允许同一份数据在应用中的不同部分以不同的形式得以展现.

过滤器可以执行任意类型的转换, 但是大多数情况下, 用于格式化或者对数据以某种方式排序.

二. 内置过滤器

1. 过滤单个数据的值

名称 描述
currency 该过滤器对货币值进行格式化
date 对日期进行格式化
json 从 JSON 字符串中生成一个对象
number 对数字值进行格式化
uppercase/lowercase 将字符串格式化为全大写或全小写
// currency
<td class="text-right">{{p.price | currency:"£" }}</td>
<td class="text-right">{{p.price | currency}}</td>

// number, number:0 , 0 表示显示的小数位数.
<td class="text-right">${{p.price | number:0 }}</td> 

// date , 格式化日期, 这个日期可以是字符串,JavaScript 日期对象或毫秒数等
 <td>{{getExpiryDate(p.expiry) | date:"dd MMM yy"}}</td>

// uppercase/lowercase
<td>{{p.name | uppercase }}</td>
<td>{{p.category | lowercase }}</td>

date 过滤器支持的格式化字符串

date 过滤器支持的快捷格式化字符串

2. 过滤数据集合

过滤器名称 描述
limitTo 限制项目数量, 支持数组对象,也支持字符串
filter 从数组中华选出一些对象, 选取条件可以为一个表达式,或者一个用于匹配属性的 map 对象
orderBy 对数组中的对象进行排序
// limitTo , 支持正数和负数
<tr ng-repeat="p in products | limitTo:limitVal">

// filter: {FIELD: NAME}, 只显示某个字段的数据. 如果通过一个函数过滤, 那么选出的项目,僵尸那些是的函数执行结果返回 true 的.
<tr ng-repeat="p in products | filter:{category: 'Fish'}">

// 函数式筛选
$scope.selectItems = function (item) {
    return item.category == "Fish" || item.name == "Beer";

<tr ng-repeat="p in products | filter:selectItems">

// orderBy:
<tr ng-repeat="p in products | orderBy:'price'"> // 根据对象的 price 属性进行排序. 注意引号
<tr ng-repeat="p in products | orderBy:'price'"> // price 降序

// 使用排序函数
$scope.myCustomSorter = function (item) {
    return item.expiry < 5 ? 0 : item.price;
}
<tr ng-repeat="p in products | orderBy:myCustomSorter">

// 排序数组, 多次排序
<tr ng-repeat="p in products | orderBy:[myCustomSorter, '-price']">

3. 链式过滤

使用多个过滤器, 按照顺序对同一数据进行操作.

<tr ng-repeat="p in products | orderBy:[myCustomSorter, '-price'] | limitTo: 5">

三. 自定义过滤器

Module.filter方法用于定义过滤器, 其参数是新过滤器的名称以及一个在调用时将会创建过滤器的工厂函数. 过滤器本身就是函数, 接受数据值并进行格式化, 这样就可以显示该值了.

示例 : 用于过滤单个数据值的过滤器

// labelCase 用于将字符串格式化为 只有首字母大写.
angular.module("exampleApp")    // 此处用于查找 exampleApp 模块, 在这一段代码被当引用的时候, 应当放在 exampleApp 定义代码的后面.
    .filter("labelCase", function () {
        return function (value, reverse) {      // value 参数是待被过滤的值, 在应用时由 AngularJS 提供; reverse 参数用于允许过滤器用途被颠倒过来.
            if (angular.isString(value)) {
                var intermediate =  reverse ? value.toUpperCase() : value.toLowerCase();
                return (reverse ? intermediate[0].toLowerCase() :
                    intermediate[0].toUpperCase()) + intermediate.substr(1);
            } else {
                return value;
            }
        };
    });

// 在 HTML 代码中使用
<td>{{p.name | labelCase }}</td>    // 此处没有指定第二个参数, 则 AngularJS 会将 null 值传给过滤器的worker 函数的第二个参数.
<td>{{p.category | labelCase:true }}</td>    

示例 : 用于过滤数据集合的过滤器

// skip 用于返回数据集合中指定数量的元素.
angular.module("exampleApp")
    .filter("labelCase", function () {
        return function (value, reverse) {
            if (angular.isString(value)) {
                var intermediate =  reverse ? value.toUpperCase() : value.toLowerCase();
                return (reverse ? intermediate[0].toLowerCase() :
                    intermediate[0].toUpperCase()) + intermediate.substr(1);
            } else {
                return value;
            }
        };
    })
    .filter("skip", function () {
        return function (data, count) {
            if (angular.isArray(data) && angular.isNumber(count)) {     // 边界检查
                if (count > data.length || count < 1) {     // 边界检查
                    return data;
                } else {
                    return data.slice(count);
                }
            } else {
                return data;
            }
        }
    });

// 调用
<tr ng-repeat="p in products | skip:2 | limitTo: 5">

示例 : 在已有的过滤器上搭建新的过滤器.

// 将 skip 和 limitTo 的功能合并到单个过滤器中.
angular.module("exampleApp")
    .filter("labelCase", function () {
        return function (value, reverse) {
            if (angular.isString(value)) {
                var intermediate =  reverse ? value.toUpperCase() : value.toLowerCase();
                return (reverse ? intermediate[0].toLowerCase() :
                    intermediate[0].toUpperCase()) + intermediate.substr(1);
            } else {
                return value;
            }
        };
    })
    .filter("skip", function () {
        return function (data, count) {
            if (angular.isArray(data) && angular.isNumber(count)) {
                if (count > data.length || count < 1) {
                    return data;
                } else {
                    return data.slice(count);
                }
            } else {
                return data;
            }
        }
    .filter("take", function ($filter) {    // 声明对 $filter 服务的依赖, 这提供了对模块中所有已定义的过滤器的访问能力. 这些过滤器通过在 worker 函数中通过名称来访问和调用.
        return function (data, skipCount, takeCount) {
            var skippedData = $filter("skip")(data, skipCount);
            return $filter("limitTo")(skippedData, takeCount);
        }
    });

    // html 中调用
    <tr ng-repeat="p in products | take:2:5">   // 多个参数.

AngularJS高级程序设计读书笔记 -- 过滤器篇的更多相关文章

  1. AngularJS高级程序设计读书笔记 -- 大纲篇

    零. 初衷 现在 AngularJS 4 已经发布了, 楼主还停留在 1.x 的阶段, 深感自卑. 学习 AngularJS 的初衷是因为, 去年楼主开始尝试使用 Flask 开发自动化程序, 需要用 ...

  2. AngularJS高级程序设计读书笔记 -- 模块篇

    一. 模块基础 1. 创建模块 <!DOCTYPE html> <html ng-app="exampleApp"> <head> <ti ...

  3. AngularJS高级程序设计读书笔记 -- 服务篇

    服务是提供在整个应用程序中所使用的任何功能的单例对象. 单例 : 只用一个对象实例会被 AngularJS 创建出来, 并被程序需要服务的各个不同部分所共享. 1. 内置服务 一些关键方法也被 Ang ...

  4. AngularJS高级程序设计读书笔记 -- 指令篇 之 自定义指令

    2. 自定义指令(15-17 章) Module.directive(name, factory) 2.1 创建自定义指令的方法 Module.directive(name, factory) 示例 ...

  5. AngularJS高级程序设计读书笔记 -- 指令篇 之 内置指令

    1. 内置指令(10-12 章) AngularJS 内置超过 50 个内置指令, 包括 数据绑定,表单验证,模板生成,时间处理 和 HTML 操作. 指令暴露了 AngularJS 的核心功能, 如 ...

  6. AngularJS高级程序设计读书笔记 -- 控制器篇

    作用域组成了一个能够用于在控制器之间形成通信的体系结构. 1. 控制器和作用域的基本原理 控制器就像领域模型与视图之间的纽带, 他给视图提供数据与服务, 并且定义了所需的业务逻辑, 从而将用户行为转换 ...

  7. javascript高级程序设计读书笔记-事件(一)

    读书笔记,写的很乱   事件处理程序   事件处理程序分为三种: 1.html事件2. DOM0级,3,DOM2级别  没有DOM1 同样的事件 DOM0会顶掉html事件   因为他们都是属性  而 ...

  8. javascript高级程序设计读书笔记

    第2章  在html中使用javascript 一般都会把js引用文件放在</body>前面,而不是放在<head>里, 目的是最后读取js文件以提高网页载入速度. 引用js文 ...

  9. Javascript高级程序设计读书笔记(第六章)

    第6章  面向对象的程序设计 6.2 创建对象 创建某个类的实例,必须使用new操作符调用构造函数会经历以下四个步骤: 创建一个新对象: 将构造函数的作用域赋给新对象: 执行构造函数中的代码: 返回新 ...

随机推荐

  1. GBDT与LR融合提升广告点击率预估模型

    1GBDT和LR融合      LR模型是线性的,处理能力有限,所以要想处理大规模问题,需要大量人力进行特征工程,组合相似的特征,例如user和Ad维度的特征进行组合.      GDBT天然适合做特 ...

  2. C# 在iis windows authentication身份验证下,如何实现域用户自动登录

    前言: 该博文产生的背景是有个项目在客户那部署方式为iis windows身份验证,而客户不想每次登录系统都要输入帐号和密码来登录. 因此需要得到域用户,然后进行判断该用户是否可以进入系统. 解决方法 ...

  3. TPshop手机新模板的用户消息实现

    今天在开发TPshop的手机新模板的消息页面,姑且记录一下. 首先,点击下方右上角,进入消息页面: 数据库中目前模拟了三条数据,有: 点击上图右上角,有: 这个 消息设置 功能是新增的,而且类型由原本 ...

  4. POJ1006: 中国剩余定理的完美演绎(非原创)

    问题描述 人自出生起就有体力,情感和智力三个生理周期,分别为23,28和33天.一个周期内有一天为峰值,在这一天,人在对应的方面(体力,情感或智力)表现最好.通常这三个周期的峰值不会是同一天.现在给出 ...

  5. js函数的使用

                           js函数应用   [函数的声明及调用]: 1.函数声明:    function 函数名(参数1,参数2,·····){    //函数体    retu ...

  6. idea 控制台输出 中文乱码 解决方法

    使用intellij idea 14.1时,console 会输出中文乱码.下面分两种情况解决这种问题:一种是maven构建项目.一种是tomcat(不以maven构建)构建项目. 1.tomcat输 ...

  7. stm32之IIC通信协议

    I2C(IIC,Inter-Integrated Circuit),两线式串行总线,由PHILIPS公司开发用于连接微控制器及其外围设备. 它是由数据线SDA和时钟SCL构成的串行总线,可发送和接收数 ...

  8. Git添加远程库和从远程库中获取(新手傻瓜式教学)

    一.    Git添加远程库 1.在本地新建一个文件夹,在该文件夹使用Git工具,运行$ git init,将该文件夹变为本地Git仓库,同时会生成一个隐藏的.git文件夹. 2.在该文件夹中用Not ...

  9. Mac和Windows系统下Mysql数据库的导入导出

    最近在构建数据库的过程中,需要将Mac os系统下的Mysql数据库导出成.sql文件,然后导入到windows系统下的Mysql中.经过学习总结出的步骤如下: 一.Mac os导出Mysql数据库 ...

  10. 总结scala(一)

    由于笔记太多,分为了几部分,进入我的博客,查看其它的笔记 scala:面向对象,函数式编程 一.声明变量 1.变量的类型 Byte,Char,Short,Int,Long,Float,Double,B ...