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 基础入门----文件系统操作与磁盘管理

    介绍 本节的文件系统操作的内容十分简单,只会包含几个命令的几个参数的讲解,但掌握这些也将对你在学习后续其他内容的过程中有极大帮助. 因为本课程的定位为入门基础,尽快上手,故没有打算涉及太多理论内容,前 ...

  2. nefu117 素数个数的位数,素数定理

    素数个数的位数 Time Limit 1000ms Memory Limit 65536K description 小明是一个聪明的孩子,对数论有着非常浓烈的兴趣.他发现求1到正整数10n 之间有多少 ...

  3. 《UNIX级别编程环境》注意读出信号(2)

    1.功能sigaction sigaction动与指定信号相关联的处理动作.其函数原型例如以下: #inlcude <signal.h> int sigaction(int signo,c ...

  4. Jquery 插件初学习

    参考文章:插件开发精品教程,让你的jQuery提升一个台阶 刚刚学了一下jquery的插件插件开发,写个demo记录.练习一下.毕竟,输出才是最好的学习. 这个也不过是最基础的一个插件写法,只是,自己 ...

  5. 纯CSS3彩色边线3D立体按钮制作教程

    原文:纯CSS3彩色边线3D立体按钮制作教程 今天我们来分享一款利用纯CSS3实现的3D按钮,这款按钮的一个特点是有彩色的边线,这让整个按钮显得比较多姿多彩,没那么枯燥无趣.本文不仅可以让大家看到演示 ...

  6. Poj 3517 And Then There Was One Joseph核心问题

    基本上纯Joseph核心问题,只是第一步多一件.m. 然后你就可以用获得的递推公式: Win(n) 代表n当个人的中奖号码, 然后,Win(n)必须相等Win(n-1).当一个人将在下一次删除队列. ...

  7. 阅读小记3(《C编程专家》)

    gets()不检查缓冲区空间.多余的字符将覆盖原来的栈的内容. fgets()的第二个參数说明最大读入的字符数. 假设这个參数值为n,那么fgets()就会读取最多n-1个字符或读完一个换行符为止.两 ...

  8. 【SSH三个框架】Hibernate第十篇基础:inverse属性具体解释

    inverse后经常用于双向1-N在相关性.它也可以在使用N-N该协会,这里,例如用双1-N联想 或两个与各部门及工作人员,两javabean没有写. 首先,我们的员工看映射文件: <?xml ...

  9. P31RestKit.dll 2.0 Unity3d json

    using System.Collections.Generic; using UnityEngine; using System.Collections; using Prime31; public ...

  10. 玩转Vim-札记

    玩转Vim-札记 距上篇博文已有一周有余,上次主要介绍了编辑器之神Vim的起源.安装并介绍了两种模式以及一些简单的操作.本次将继续对Vim的使用进行介绍. 登堂入室 首先接着说移动吧: 1 0 → 数 ...