在开发中，经常会遇到这样的场景

如用户的性别分为“男”和“女”，在数据库中保存的值为1和0，用户在查看自己的性别时后端返回的值自然是1或0，前端要转换为“男”或“女”再显示出来；

如我要换个羽毛球拍，某猫上羽毛球拍的品牌多达数十种，我想单独查看YONEX这个品牌的羽毛球拍；

买完羽毛球拍我还想买一桶羽毛球，点击按销量排序展示商品；

以上三种场景分别对数据进行了转换／筛选／排序，总而言之就是对数据的格式化，AngularJS的filter就是用来做这个事的。

内置过滤器

AngularJS内置了很多过滤器，在HTML模板的绑定符号{{}}内通过｜来调用过滤器

如字母转换成大写：$scope.name='wangmeijian'

{{name | uppercase}}   // 输出 WANGMEIJIAN

数字转成千分位写法：$scope.num = 12345678

{{num | number}} // 输出 12,345,678

日期格式化：$scope.date=new Date()

{{date | date:'yy-MM-dd'}}   // 输出 2015-11-19

数字格式化成货币：$scope.num=987654321

{{num | currency:'¥'}}   // 输出 ¥987,654,321.00

demo戳这里

稍微复杂一点的过滤器——‘filter’，可以返回给定数组的子集，它接收一个参数，这个参数可以是字符串、对象、函数

字符串：返回所有包含这个字符串的元素，想要返回不包含这个字符串的元素则在前面加！

demo：

{{['wang','mei','jian'] | filter:'a'}} // 返回包含字母a的元素 ['wang','jian']

对象：Angular会将待过滤对象的属性与这个对象中的同名属性进行比较，如果属性值是字符串会判断是否包含该字符串（注意这里是包含，并不需要完全相等）

demo：

{{ [

    {

        name: 'wangmeijian',

        sex: 'boy'

    },

    {

        name: 'bokeyuan',

        sex: 'sex'

    }

   ] | filter:{

        sex: 'bo'

　　　　}
}}

// 输出 [{"name":"wangmeijian","sex":"boy"}]

函数：对每个元素都执行该函数，返回非假值的元素会出现在新的数组中并返回

demo：

$scope.getNumber = function(n){
　　return !isNaN(n);
}

{{ ['demo',2,3] | filter:getNumber}}  // 输出 [2,3]

自定义过滤器

当内置函数不能满足你的业务需求时，就需要自定义一个过滤器，自定义过滤器返回一个函数，函数的参数就是HTML模板中|左侧的数据，它会自动传入过滤器中

比如需求是将一句话中的每个单词首字母变成大写

<html ng-app='app'>

    <head>

        <title>AngularJS过滤器filter入门</title>

        <script type="text/javascript" src="http://cdn.bootcss.com/angular.js/1.5.0-beta.1/angular.js"></script>

    </head>

    <body ng-controller='myController'>

        <p>{{ str | capitalize}}</p>

        <!-- 输出 Hello, Welcome To Bokeyuan! -->

        <script type="text/javascript">

        var app = angular.module('app',[])

        .controller('myController',['$scope', function($scope){

            $scope.str = 'hello, welcome to bokeyuan!'

        }])

        .filter('capitalize', function(){

            return function(str){

                var arr = str.split(/\s+/);

                for (var i = 0; i < arr.length; i++) {

                    arr[i] = arr[i].substr(0,1).toUpperCase() + arr[i].slice(1);

                };

                return arr.join(" ")

            }

        })

        </script>

    </body>

</html>

需要注意的是，内置过滤器‘filter’的参数是函数时，会对数组的每个元素执行该函数，自定义过滤器是对数组对象执行它return的函数。

作者：古德God
出处：http://www.cnblogs.com/wangmeijian

本文版权归作者和博客园所有，欢迎转载，转载请标明出处。

如果您觉得本篇博文对您有所收获，请点击右下角的 [推荐]，谢谢！

AngularJS过滤器filter入门的更多相关文章

  1. AngularJS 过滤器 Filter

    过滤器实质是数据转换或过滤,把ViewMode中的数据转化成View层用户友好的信息.可以看做一个函数,负责接收输入,转换成输出,每次参数变化时,它就被执行,输出被视图View使用. 一.基本定义及其 ...

  2. AngularJS过滤器filter-时间日期格式-渲染日期格式-$filter

    今天遇到了这些问题索性就 写篇文章吧 话不多说直接上栗子 不管任何是HTML格式还是JS格式必须要在  controller 里面写 // new Date() 获取当前时间 yyyy-MM-ddd ...

  3. angularjs之filter过滤器

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

  4. Angularjs在控制器(controller.js)的js代码中使用过滤器($filter)格式化日期/时间实例

    Angularjs内置的过滤器(filter)为我们的数据信息格式化提供了比较强大的功能,比如:格式化时间,日期.格式化数字精度.语言本地化.格式化货币等等.但这些过滤器一般都是在VIEW中使用的,比 ...

  5. 【angularJS】Filter 过滤器

    当从后台获取到的数据呈现到视图上时,此时可能需要对数据进行相应的转换,此时我们可以通过过滤器在不同页面进行不同数据的格式抓换,在AngularJS中有常见默认的过滤器,当然若不满足所需,我们可以自定义 ...

  6. AngularJS的过滤器$filter

    过滤器(filter)主要用于数据的格式上,通过某个规则,把值处理后返回结果.例如获得数据集,可排序后再返回. ng内置的共有九种过滤器: currency 货币 使用currency可以将数字格式化 ...

  7. AngularJS 笔记系列（五）过滤器 filter

    过滤器是用来格式化给用户展示的数据的. 在 HTML 中的模板绑定符号{{}} 内通过|符号来调用过滤器. 大写:{{ name | uppercase }} 也可以在 JS 中进行调用$filter ...

  8. AngularJS 过滤器

    过滤器可以使用一个管道字符(|)添加到表达式和指令中 AngularJS 过滤器可用于转换数据: currency 格式化数字为货币格式. filter 从数组项中选择一个子集. lowercase ...

  9. AngularJS过滤器

    1.过滤器可以使用一个管道字符(|)添加到表达式和指令中. 再次强调一点,所有的运行都要加入angularJS的库文件(类似JQuery的引用) 常见的AngularJS 过滤器 (1) lowerc ...

随机推荐

  1. net.sf.json------json解析

    下载地址 [plain] view plain copy   本次使用版本:http://sourceforge.net/projects/json-lib/files/json-lib/json-l ...

  2. Sparrow.Chart.Wpf控件的动态调用

    最近需要在Wpf程序中显示曲线,感觉Sparrow.Chart.Wpf控件不错(http://sparrowtoolkit.codeplex.com/),完全开源的一个控件支持,可以通过nuget下载 ...

  3. poj 2947 Widget Factory （高斯消元解同余方程组+判断无解、多解）

    http://poj.org/problem?id=2947 血泪史: CE:poj的string类型要加string库,swap不能直接交换数组 WA: x[m-1]也有可能<3啊O(≧口≦) ...

  4. css 基础2

    1.内部样式表: 2.行内样式表:在标签内写style,适合style 比较少的情况 3.外部样式表(外联式): 4.html标签可以分为:块级标签,h1~h6,div ,p,ul,ol,li,div ...

  5. 《翻译》PEP 380 – 委托子生成器语法

     PEP 380 – 委托子生成器语法 翻译自: https://www.python.org/dev/peps/pep-0380/ 摘要 一项新的语法被提出了:生成器委托其部分操作给另一个生成器.委 ...

  6. AngularJs -- 内置指令

    AngularJS提供了一系列内置指令.其中一些指令重载了原生的HTML元素,比如<form>和<a>标签, 当在HTML中使用标签时,并不一定能明确看出是否在使用指令. 其他 ...

  7. AngularJS入门基础——控制器

    AngularJS中的控制器是一个函数,用来向视图的作用域添加额外的功能.我们用它来给作用域对象设置初始状态,并添加自定义行为. AngularJS同其他JavaScript框架最主要的一个区别就是, ...

  8. 使用Docx4j创建word文档

    原文标题:Creating Word documents with Docx4j 原文链接:http://blog.iprofs.nl/2012/09/06/creating-word-documen ...

  9. Maven私服安装及配置——(十二)

    0.私服实际是B/S架构的,需要通过浏览器访问.访问地址在 nexus-2.12.0-01\conf\nexus.properties中查看.

  10. flask基础之请求钩子（十二）

    前言 什么是请求钩子?在客户端和服务器交互的过程中,有些准备工作或扫尾工作需要统一处理,为了让每个视图函数避免编写重复功能的代码,flask提供了统一的接口可以添加这些处理函数,即请求钩子. 请求钩子 ...