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

如用户的性别分为“男”和“女”，在数据库中保存的值为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. spring BasicDataSource 数据源配置 sqlserver数据库 oracle数据库 mysql数据jdbc配置

    spring BasicDataSource 数据源配置 sqlserver数据库 oracle数据库 mysql数据jdbc配置 jdbc.properties 文件信息如下: ---------- ...

  2. Intel 8086_通用寄存器|段寄存器

  3. 【CSS】定位层

    html:定位层1.概念: >>.定位层是由html元素(标签)形成的一个特殊的box盒子. >>.其重点在于“定位”,而html元素(标签)的定位方式由CSS来控制. 通常情 ...

  4. springSecurity自定义认证配置

    上一篇讲了springSecurity的简单入门的小demo,认证用户是在xml中写死的.今天来说一下自定义认证,读取数据库来实现认证.当然,也是非常简单的,因为仅仅是读取数据库,权限是写死的,因为相 ...

  5. Redis记录-Redis高级应用

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

  6. MyBatis中传入参数parameterType类型详解

    前言 Mybatis的Mapper文件中的select.insert.update.delete元素中有一个parameterType属性,用于对应的mapper接口方法接受的参数类型.本文主要给大家 ...

  7. Python字符串颜色输出

    \033[1;31;40m      # 1是显示方式(可选),31是字体颜色,40m 是字体背景颜色: \033[0m           # 恢复终端默认颜色,即取消颜色设置: # cat col ...

  8. JavaScript模拟QQ签名(HTML5 contenteditable属性)

    例图: 一.思路 1.单击元素时,使元素可以编辑,并获得焦点 2.按下键盘检测用户编辑元素中的文本 3.监听按下Enter键操作或离开可编辑元素焦点时,更新数据库 二.代码 $(function(){ ...

  9. Jquery自定义滚动条插件

    下载地址:http://files.cnblogs.com/files/LoveOrHate/jquery.nicescroll.min.js <script src="jquery. ...

  10. html5 canvas 圆形径向渐变

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...