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. 线程池ThreadPoolExecutor使用简介(转)

    一.简介 线程池类为 java.util.concurrent.ThreadPoolExecutor,常用构造方法为: ThreadPoolExecutor(int corePoolSize, int ...

  2. ios7 JavaScriptCore.framework

    曾经想要oc调用js代码通常是通过uiwebview的stringByEvaluatingJavaScriptFromString方法,或是直接使用JavaScriptCore引擎,比如https:/ ...

  3. ZooKeeper完全分布式安装和配置

    ZooKeeper简介见官方网站. 1.环境说明 在两台装有centos6.4(32位)的server上安装ZooKeeper,官网建议至少3个节点.资源有限,本次实验就2台了. 须要提前安装jdk. ...

  4. android tv 全屏幕垂直画

    它们的定义view 采纳canvas双缓冲方式,它可以减少呈现时间.提高性能. StaggeredView.java 源码例如以下: package com.xxx.demo; import andr ...

  5. hdu 1426 Sudoku Killer ( Dancing Link 精确覆盖 )

    利用 Dancing Link 来解数独 详细的能够看    lrj 的训练指南 和 < Dancing Links 在搜索中的应用 >这篇论文 Dancing Link 来求解数独 , ...

  6. hdu 4115 石头剪子布(2-sat问题)

    /* 意甲冠军:石头剪子布,目前已知n周围bob会有什么,对alice限制.供u,v,w:设w=0说明a,b回合必须出的一样 否则,必须不一样.alice假设输一回合就输了,否则就赢了 解: 2-sa ...

  7. Codeforces 135A-Replacement(思维)

    A. Replacement time limit per test 2 seconds memory limit per test 256 megabytes input standard inpu ...

  8. SICP 练习 (2.12)解决摘要 :不同的实现时间

    SICP 2.12 要求我们定义一个构造函数make-center-percent,它接收两个參数,分别代表中心点和一个误差百分比.我们须要通过这个构造函数产生一个区间.此外还须要定义一个选择函数pe ...

  9. 微软将彻底改变Windows发布方式

    看到网上的新闻信息: 微软上任 CEO 史蒂夫·鲍尔默在职最后一段时间引入了更快的产品公布周期.不再向从前那样,每隔几年公布一次重大产品升级,而是功能一旦开发完成就会推送升级. 显然,现任 CEO 纳 ...

  10. java流下载

    @RequestMapping("/pluginDownload") public void pluginDownload(HttpServletResponse response ...