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. response的contentType 几种类型

    ajax开发中在请求server端的响应时, 对于每一种返回类型 规范的做法是要在服务端指定response的contentType 的. (当然 不指定绝大多数情况下也没什么问题 尤其是返回&quo ...

  2. Java新手如何学习Spring、Struts、Hibernate三大框架?(转)

    整理知乎大牛答案: 1.入门看文档(blog,书籍等等),深入理解配置文件的含义(Spring.Struts.Hibernate); 2.遇到问题,自己动手解决,如果解决了,为什么这样解决?(凡事总问 ...

  3. requestWindowFeature()应用

    我们在开发程序是常常会须要软件全屏显示.自己定义标题(使用button等控件)和其它的需求,今天这一讲就是怎样控制Android应用程序的窗口显示. 首先介绍一个重要方法那就是requestWindo ...

  4. 【LeetCode】 String中的最长回文

    java 普通版: 1.正序遍历数组,取得子字符串的首字母. 2.倒序遍历数组,取的子字符串的尾字母. (这样仅仅要在子循环中第一个出现回文,那么该回文肯定是本次循环的最长的回文) 3.新增数据结构, ...

  5. cer证书签名验证

    一个cer还需要一个签名的证书本身,这是为了防止cer证书被篡改. 有两种类型的证书: 1. 根证书 2. 由根证书颁发子证书. 特根证书.它是自签名. 而其它子证书的签名公钥都保存在它的上级证书里面 ...

  6. 使用Navicat Premium 和PL\SQL Developer连接Oracl

    在64位Win7中使用Navicat Premium 和PL\SQL Developer连接Oracle数据库备忘   最近接手了一个项目,服务器端数据库是oracle 11g 64位.由于主要工作不 ...

  7. WebService它CXF注释错误(两)

    WebService它CXF注解 1.详细报错例如以下 五月 04, 2014 11:24:12 下午 org.apache.cxf.wsdl.service.factory.ReflectionSe ...

  8. C# - object有哪些基本方法类有

    Name Description Equals(Object) Determines whether the specified object is equal to the current obje ...

  9. Yii Framework2.0开发教程(10)配合mysql数据库实现用户登录

    1.首先在mysql创建一个存用户的表格 create table test_user ( user_id bigint(20) unsigned not null auto_increment co ...

  10. SQL代理执行EXE可执行程序

    原文:SQL代理执行EXE可执行程序  1.如果没有启用xp_cmdshell安全配置是不可以使用的-- 启用xp_cmdshellEXEC sp_configure 'xp_cmdshell', 1 ...