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

如用户的性别分为“男”和“女”，在数据库中保存的值为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. BZOJ 1031 [JSOI2007]字符加密Cipher 后缀数组教程

    1031: [JSOI2007]字符加密Cipher Description 喜欢钻研问题的JS同学,最近又迷上了对加密方法的思考.一天,他突然想出了一种他认为是终极的加密办法:把需要加密的信息排成一 ...

  2. [APIO2018] Duathlon 铁人两项

    不经过重点,考虑点双 点双,考虑圆方树 两个点s,t,中间路径上,所有点双里的点都可以经过,特别地,s,t作为割点的时候,不能往后走,也就是不能经过身后的方点 也就是,(s,t)经过树上路径上的所有圆 ...

  3. TensorFlow分布式实践

    大数据时代,基于单机的建模很难满足企业不断增长的数据量级的需求,开发者需要使用分布式的开发方式,在集群上进行建模.而单机和分布式的开发代码有一定的区别,本文就将为开发者们介绍,基于TensorFlow ...

  4. Redis记录-Redis高级应用

    Redis数据库可以使用安全的方案,使得进行连接的任何客户端在执行命令之前都需要进行身份验证.要保护Redis安全,需要在配置文件中设置密码. 示例 下面的示例显示了保护Redis实例的步骤. 127 ...

  5. 兼容 IE6+ 获取图片大小

    昨天说了 HTML5 的file对象可以获取到文件的 文件名,文件大小,文件类型,最后一次修改日期.其实 IE6-9 也可以变向的获取到,虽然没那么方便,但至少可以取到.来看例子吧: <!doc ...

  6. JavaScript编写风格指南 (三)

    七(七):严格模式 // 严格模式应当仅限在函数内部使用,千万不要在全局使用 //不好的写法:全局使用严格模式"user strict"; function doSomething ...

  7. VS 多工程代码编写

    VS工作目录,输出目录 C++项目,解决方案总文件夹下就只包含解决方案配置文件sln和一个项目总文件夹和一个Debug文件夹以及一个Release文件夹(共四个东东,其中Debug和Release文件 ...

  8. mysql集成部署

    经常听说mysql数据库是集成在系统中,也一直不太明白集成的概念.今天才明白集成的概念就是将mysql所有的文件放到一个文件夹下放到系统中,也就是将mysql采用目录迁移部署的方式进行安装.在上一篇研 ...

  9. mysql基本操作【重要】

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAuYAAAVeCAIAAACyxWmSAAAgAElEQVR4nOydT0wbV/vvZzm7YXd2zI ...

  10. python文件操作及格式化输出

    1 文件与IO 1.1读写文本数据 读写各种不同的文本数据,如ASCII,UTF-8,UTF-9编码等. 使用带有rt模式的open()函数读取文本文件. 例如: with open('db', 'r ...