filter是对数据进行过滤操作,比如按某个字段搜索、格式化数据等等,是一个非常有用的接口。下面就简单介绍下它的用法。

AngularJS自带的filter接口,|是filter的分隔符,参数用:分隔;

currency,格式化number,货币化,默认是转化成美元  param(number,symbol),返回值将会把数字每3位加一个逗号

<input type="number" ng-model="amount"/>

<p>默认美元:{{amount|currency}}</p>

<p>人民币:{{amount|currency:'¥'}}</p>

<p>空:{{amount|currency:''}}</p>

结果:

date       :格式化时间,param(date|Date,number,string,format)
filter       :过滤array,param(string|object|function,第二参数不明白)
json        :将一个object转换成json形式的字符串
limitTo   :限制string或array的长度,参数如果是正数(positive)则从beginning开始,如果是负数(negative)则从end开始
lowercase:小写
uppercase:大写
number :保留小数点个数,默认是3位,返回值将会把数字每3位加一个逗号
orderBy:对数组进行排序,param(string|function|array,reverse);
 
自定义filter
基本用法如下例:
var moduleName = angular.module('moduleName', []);
//对字符串的过滤
moduleName.filter('filterName', function() {
return function(data) {
//do something to change the data value,but dont change the data type.
return data;
}
})
//对array的过滤
moduleName.filter('plus15', function() {
return function(orginalArr) {
var arr = [];
angular.foEach(function(value, key) {
if (value >= 15) {
arr.push(value);
}
})
return arr;
}
})

html使用:

<ul ng-repeat="value in historyData | plus15">
<li>{{value.day|filterName}}:{{value.temp}}</li>
</ul>

AngularJS学习笔记filter的更多相关文章

  1. AngularJs学习笔记--expression

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/expression 表达式(Expressions)是类Javascript的代码片段,通常放置在绑定 ...

  2. AngularJs学习笔记--concepts(概念)

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/concepts 继续.. 一.总括 本文主要是angular组件(components)的概览,并说明 ...

  3. AngularJs学习笔记--unit-testing

    原版地址:http://docs.angularjs.org/guide/dev_guide.unit-testing javascript是一门动态类型语言,这给她带来了很强的表现能力,但同时也使编 ...

  4. AngularJs学习笔记--I18n/L10n

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/i18n 一.I18n and L10n in AngularJS 1. 什么是I18n和L10n? 国 ...

  5. AngularJs学习笔记--Modules

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/module 一.什么是Module? 很多应用都有一个用于初始化.加载(wires是这个意思吗?)和启 ...

  6. AngularJs学习笔记--Dependency Injection(DI,依赖注入)

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/di 一.Dependency Injection(依赖注入) 依赖注入(DI)是一个软件设计模式,处理 ...

  7. AngularJs学习笔记--E2E Testing

    原版地址:http://docs.angularjs.org/guide/dev_guide.e2e-testing 当一个应用的复杂度.大小在增加时,使得依靠人工去测试新特性的可靠性.抓Bug和回归 ...

  8. AngularJs学习笔记--Understanding Angular Templates

    原版地址:http://docs.angularjs.org/guide/dev_guide.mvc.understanding_model angular template是一个声明规范,与mode ...

  9. AngularJs学习笔记--Forms

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/forms 控件(input.select.textarea)是用户输入数据的一种方式.Form(表单) ...

随机推荐

  1. 十天学Linux内核之第五天---有关Linux文件系统实现的问题

    原文:十天学Linux内核之第五天---有关Linux文件系统实现的问题 有时间睡懒觉了,却还是五点多醒了,不过一直躺倒九点多才算起来,昨晚一直在弄飞凌的嵌入式开发板,有些问题没解决,自己电脑系统的问 ...

  2. Instruments-Automation: 通过命令行执行测试用例

    为了实现该脚本的自己主动定时执行.我们需要开始在命令行和脚本,详细代码如下所示的: instruments -t /Applications/Xcode.app/Contents/Applicatio ...

  3. C#操作Xml:如何定义Xsd文件

    Xml Schema的用途 1. 定义一个Xml文档中都有什么元素 2. 定义一个Xml文档中都会有什么属性 3. 定义某个节点的都有什么样的子节点,可以有多少个子节点,子节点出现的顺序 4. 定义元 ...

  4. java_前端_autocomplete_搜索框自动匹配提示

    效果图: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> < ...

  5. ReactJS.NET

    初探ReactJS.NET 开发 ReactJS通常也被称为"React",是一个刚刚在这场游戏中登场的新手.它由Facebook创建,并在2013年首次发布.Facebook认为 ...

  6. uboot中raise:Signal #8 caught的根本原因

    在移植uboot时编译一切正常,但uboot启动中载入自己写的网卡驱动出现故障,一直在打印raise:Signal #8 caught google  百度了一番,也有非常多人遇到了这个问题,大家都说 ...

  7. Spark入门级小玩

    ·背景 随着周边吐槽hadoop的声音渐渐多起来之后,spark也逐渐进入了大家的视野.之前,笔者有粗略的写过一篇spark的安装和性能比较[http://www.cnblogs.com/zacard ...

  8. IIS7 URL Rewrite 用法实例

    原文:IIS7 URL Rewrite 用法实例 很友好的URL地址,使访问的人很容易记住.要求你的用户记住" http://www.contoso.com/article.aspx?id= ...

  9. WPF中的CheckBox的_ (underscore / 下划线)丢失

    今天在项目中遇到check box的Content的内容缺少'_', 原因是WPF的ContentPresenter默认会把'_'作为加速键的转义字符.  比方CheckBox的content为&qu ...

  10. PHP 调用微信JS-SDK 开发详解 [网摘]

    一:准备文件,并将文件置于网站根目录下 access_token.json {"access_token":"","expire_time" ...