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

如用户的性别分为“男”和“女”，在数据库中保存的值为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. 【LOJ#10064】黑暗城堡

    题目大意:定义一个无向图的最短路径生成树如下:在该无向图的生成树中,任意一个节点到根节点的距离均等于根节点到该节点的最短路.求有多少种最短路径生成树. 题解:首先跑一遍 dij 求出从根节点到每个节点 ...

  2. Windows系统安装————windows7 企业版 无法安装 NET.framework4.52-4.6版本在WIN7下解决办法

    官方安装包下载地址:https://www.microsoft.com/zh-cn/download/details.aspx?id=48137 我安装了NMM后提示NET.framework版本太低 ...

  3. [iOS]Xcode处理过时方法的警告

    ####强迫症的福利, 有的时候, 我们特别讨厌Xcode中的代码警告, 以下就是遇到各种警告的时候的处理方法:(后续会一直更新) 产生警告的原因: 某些方法废弃了, 会产生警告! 样式: 处理方法: ...

  4. linq中let关键字学习

    linq中let关键字就是对子查询的一个别名,let子句用于在查询中添加一个新的局部变量,使其在后面的查询中可见. linq中let关键字实例 1.传统下的子查询与LET关键字的区别     C# 代 ...

  5. AngularJS -- 代码实例

    整理书籍内容(QQ:283125476 发布者:M [重在分享,有建议请联系->QQ号]) ng-change 当文本输入字段中内容发生了变化,就会改变equation.x的值: <bod ...

  6. Quartus II 破解教程—FPGA入门教程【钛白Logic】

    这一节主要说明如何破解Quartus II 13.1.首先找到我们提供的破解工具,这里我们的电脑是64位的,所以使用64位破解器.如下图. 第一步:将破解工具拷贝到安装目录下“D:\altera\13 ...

  7. 大数据的常用算法（分类、回归分析、聚类、关联规则、神经网络方法、web数据挖掘）

    在大数据时代,数据挖掘是最关键的工作.大数据的挖掘是从海量.不完全的.有噪声的.模糊的.随机的大型数据库中发现隐含在其中有价值的.潜在有用的信息和知识的过程,也是一种决策支持过程.其主要基于人工智能, ...

  8. tomcat启动报错：Injection of autowired dependencies failed

    tomcat启动报错:Injectjion of autowired dependencies failed 环境: 操作系统:centos6.5 tomcat: 7.0.52 jdk:openjdk ...

  9. 虚拟机Failed to start LSB: Bring up/down networking

      1.执行 service network restart 出现以下错误 Restarting network (via systemctl):  Job for network.service f ...

  10. 【linux】环境变量

    参考链接: http://www.cnblogs.com/growup/archive/2011/07/02/2096142.html https://zhidao.baidu.com/questio ...