前言

本节我们来讲讲AngularJS中主要的部分之一，那就是过滤器，当从后台获取到的数据呈现到视图上时，此时可能需要对数据进行相应的转换，此时我们可以通过过滤器在不同页面进行不同数据的格式抓换，在AngularJS中有常见默认的过滤器，当然若不满足所需，我们可以自定义过滤器。

AngularJS默认过滤器

列举AngularJS中常见的过滤器，如下：

过滤器名称 描述 例子
 currency  money格式化  {{ p.price | currency}}
 date  日期格式化

{ p.orderDate | date : “dd MMM yyyy” }}

{{ p.orderDate | date : “shortDate” }}
 json  将JSON字符串生成一个JSON对象

<tr ng-repeat="p in products">

<td colspan="4">{{p | json}}</td>

</tr>
 number  格式化数值并给出精确度位数

{{ p.price | number : 0}}

{{ p.price | number : 2}}

uppercase

lowercase

  大小写转换

{{ p.city | lowercase }}

{{ p.state | uppercase }}
 limitTo  控制列表渲染数据  <tr ng-repeat="p in products | limitTo:10">
 orderBy  排序

<tr ng-repeat="p in products | orderBy : ‘name’”>

For descending order

<tr ng-repeat="p in products | orderBy : ‘-name’”>

默认过滤器示例

我们渲染一个产品列表并将产品名称转换为大写，产品类别小写，以及数量保留两位小数等。

UI

<body ng-controller="FilterCtrl">

    <div class="panel panel-default">

        <div class="panel-heading">

            <h3>

                产品个数

                <span class="label label-primary">{{products.length}}</span>

            </h3>

        </div>

        <div class="panel-body">

            <table class="table table-striped table-bordered table-condensed">

                <thead>

                    <tr>

                        <td>名称</td>

                        <td>类别</td>

                        <td>供给日期</td>

                        <td class="text-right">数量</td>

                        <td class="text-right">价格</td>

                    </tr>

                </thead>

                <tbody>

                    <tr ng-repeat="p in products | orderBy :'name'">

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

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

                        <td>{{getExpiryDate(p.expiry) | date:"dd MMM yy"}}</td>

                        <td class="text-right">{{p.quantity | number:2 }}</td>

                        <td class="text-right">{{p.price | currency}}</td>

                    </tr>

                </tbody>

            </table>

        </div>

    </div>

</body>

JS

app.controller('FilterCtrl', function ($scope) {

    $scope.products = [

                    { name: "Sony LED", category: "TV", price: 40000, quantity:10, expiry: 30 },

                    { name: "Vivo xplay5", category: "Mobile", price: 35640, quantity: 08, expiry: 21 },

                    { name: "LeTv", category: "TV", price: 36000, quantity: 5, expiry: 50 },

                    { name: "Iphone 6 plus", category: "Mobile", price: 55000, quantity: 6, expiry: 60 },

                    { name: "Galaxy s7 edge", category: "Mobile", price: 45000, quantity: 15, expiry: 50 },

    ];  

    $scope.getExpiryDate = function (days) {

        var now = new Date();

        return now.setDate(now.getDate() + days);

    }  

});

最后生成如下：

自定义过滤器示例

AngularJS不仅仅支持内部自构建的过滤器，而且还可以自定义过滤器来满足我们所需，若自定义过滤器此时我们需要 通过module.filter来实现，实际上内部是通过FilterProvider来实现。module.filter这个方法有两个参数，一个是需要创建的过滤器的名称，另外一个是创建一个factory函数来使得该自定义过滤器生效或者工作。

接下来我们实现一个自定义过滤器，该过滤器带一个参数，实现了再对照代码就明朗了。如下：

app.filter("properCase", function () {

    return function (value, reverse) {

        if (angular.isString(value)) {

            var intermediate = reverse == false ? value.toUpperCase() : value.toLowerCase();

            return (reverse == false ? intermediate[0].toLowerCase() :

            intermediate[0].toUpperCase()) + intermediate.substr(1);

        } else {

            return value;

        }

    };

});

接下来在视图中将绑定的名称和类别修改成如下：

 <td>{{p.name | properCase}}</td>

 <td>{{p.category | properCase : false}}</td>

结果如下：

混合过滤器示例

当进行渲染数据时，有可能需要进行多次过滤此时我们就需要创建多个自定义过滤器或者内置过滤器和自定义过滤器混合使用。

我们首先对列表通过name来orderby一下，然后通过自定义过滤器移除前两条数据。

app.filter("skipRec", 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 | orderBy :'name' | skipRec:2">

 .......

 <tr>

最终我们得到的结果如下：

总结

本节我们学习了AngularJS的过滤器，然后对默认过滤器、自定义过滤器以及混合过滤器统一进了相应的示例说明来加深理解，我们下节再见。

AngularJS之Filter（二）的更多相关文章

  1. angularjs之filter过滤器

    现在公司用ionic,就是基于angularjs封装了一些api用于webapp,最近用的angularjs的filter确实省了很多代码,现在总结一下! ng比较鸡肋的过滤器,这里就一笔带过吧!鸡汤 ...

  2. angularjs的$filter使用

    angularjs的$filter使用 $filter服务可以在js中对数据进行过滤处理,ng有几个内建的filter,其中有一个叫filter的filter,可方便的实现属性的过滤. 详细的API参 ...

  3. AngularJS的Filter用法详解

    上一篇讲了自定义Directive,本篇是要讲到AngularJS的Filter. Filter简介 Filter是用来格式化数据用的. Filter的基本原型( '|' 类似于Linux中的管道模式 ...

  4. angularjs ngrepeat filter

    angularjs ng-repeat filter演示样例 地址

  5. AngularJS过滤器filter入门

    在开发中,经常会遇到这样的场景 如用户的性别分为“男”和“女”,在数据库中保存的值为1和0,用户在查看自己的性别时后端返回的值自然是1或0,前端要转换为“男”或“女”再显示出来: 如我要换个羽毛球拍, ...

  6. AngularJS学习笔记(二) 表单验证案例(ng-repeat/filter)

    这一节相对来说需要理解的东西不是太多,记住了那些api就行了. 还是一个案例(同样来自miaov),一个表单验证,先上代码,然后再对对应的内容进行解释. <!DOCTYPE html> & ...

  7. 转：AngularJS的Filter用法详解

    Filter简介 Filter是用来格式化数据用的. Filter的基本原型( '|' 类似于Linux中的管道模式): {{ expression | filter }} Filter可以被链式使用 ...

  8. Mastering Web Application Development with AngularJS 读书笔记(二)

    第一章笔记 (二) 一.scopes的层级和事件系统(the eventing system) 在层级中管理的scopes可以被用做事件总线.AngularJS 允许我们去传播已经命名的事件用一种有效 ...

  9. AngularJS学习笔记二:AngularJS指令

    AngularJS 指令: AngularJS 通过被称为 指令 的新属性来扩展 HTML. AngularJS 指令是扩展的 HTML 属性,带有前缀 ng-. 几个常用 指令: ng-app 指令 ...

随机推荐

  1. PHP注册与登录【2】用户注册

    注册页面 reg.html 负责收集用户填写的注册信息.教程里只列出关键的代码片段,完整的代码附在本节最后. 注册表单 <fieldset> <legend>用户注册</ ...

  2. [译]App Framework 2.1 （2）之 Get Involved

    App Framework  API 第二篇 原文在此:http://app-framework-software.intel.com/documentation.php#intro/involved ...

  3. 文件处理命令：sed

    使用:sed [-nefr] actionaction:-i直接修改读取的档案内容,而不是由屏幕输出,-r表示支持延伸型正则表达式的语法.动作说明:[n1[,n2]] function n1,n2表示 ...

  4. Hibernate Session中的save(),update(),delete(),saveOrUpdate() 细粒度分析

    Hibernate在对资料库进行操作之前,必须先取得Session实例,相当于JDBC在对资料库操作之前,必须先取得Connection实例, Session是Hibernate操作的基础,它不是设计 ...

  5. 《JavaScript高级程序设计（第3版）》阅读总结记录第一章之JavaScript简介

    前言: 为什么会想到把<JavaScript 高级程序设计(第 3 版)>总结记录呢,之前写过一篇博客,研究的轮播效果,后来又去看了<JavaScript 高级程序设计(第3版)&g ...

  6. C# Listview 数据绑定

    今天搞Winform,有串数据需要绑定到TabControl里面,原来用datatable,组长说这玩意会有问题不让用,菜鸟实在不会,百度查的Listview用法,写了个数组进去绑定 using Sy ...

  7. SEO：避免关键词内部竞争带来的无法收录问题，

    站内关键词相互竞争在未经过搜索引擎优化的网站中常出现.许多人不理解搜索引擎对关键词的索引原理,以为在整站内频繁布局某几个热门关键词能提升这些词的排名. 一.搜索引擎希望展现多种多样的搜索结果 搜索引擎 ...

  8. 学习安装并配置前端自动化工具Gulp

    Gulp和所有Gulp插件都是基于nodeJs来运行的,因此在你的电脑上需要安装nodeJs,安装过程请移驾安装并配置前端自动化工具--grunt.安装完成后,通过运行cmd进入DOS命令窗口,如图: ...

  9. mac与windows通过ftp传输文件

    1.两个系统相互传文件,比较通用的方式是用QQ,两台电脑一台各登陆一个qq,发文件就行了,在同一个网段时,qq会自动转换为按局域网的方式传输. 2.本人不愿安装qq,以ftp方式进行传输,先在wndo ...

  10. PAT Judge

    原题连接:https://pta.patest.cn/pta/test/16/exam/4/question/677 题目如下: The ranklist of PAT is generated fr ...