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. (大数据工程师学习路径)第二步 Vim编辑器----Vim快速入门

    vim模式介绍 以下介绍内容来自维基百科Vim 从vi演生出来的Vim具有多种模式,这种独特的设计容易使初学者产生混淆.几乎所有的编辑器都会有插入和执行命令两种模式,并且大多数的编辑器使用了与Vim截 ...

  2. 使用Django清理数据库中的数据

    数据库,数据清洗 问题叙述性说明:在系统我用在,因为历史和由于各种原因,原因记录的数据内的数据库表,有一个问题,有反复和不完整的数据 解:首先.由于数据量还是挺大的,工的清理肯定不行, 然后,我就想写 ...

  3. Android - 建设项目的版本号

    建设项目的版本号 本文地址: http://blog.csdn.net/caroline_wendy 依据SVN中的项目, 构建本地版本号, 进行开发, 构建方式是: 1. "svn co& ...

  4. 【SSH三框架】Hibernate基金会七:许多附属业务

    相对于上述一关系,在这里,下一个一对多关系说明. 另外,在上述.我们描述了许多人描述的一一对应关系.在关系数据库是多对一的关系.但也有许多关系. 但,只知道它是不够的,Hibernate它是一种面向对 ...

  5. 网络编程I/O功能介绍

    read和write #include <unistd.h> ssize_t read(int fd, void *buf, size_t count); ssize_t write(in ...

  6. Codeforces 374D Inna and Sequence 二分法+树状数组

    主题链接:点击打开链接 特定n一个操作,m长序列a 下列n的数量 if(co>=0)向字符串加入一个co (開始是空字符串) else 删除字符串中有a的下标的字符 直接在序列上搞.简单模拟 # ...

  7. Git 常用命令手记 及 Github协同流程(转)

    符号约定俗成:<xxx> 自定义内容xxx:[xxx] xxx为可选项:[<xxx>] 自定义内容xxx且为可选项. 说明/备注 命令 备注 保存更新 git add [-i] ...

  8. 收藏的一些javascript片段

    原文:收藏的一些javascript片段 学习js也很有一段时间,收集了一些js的片段.特地整理排版了一下,以一个js初学者的视界来分析注释了这些代码段,暂且不去讨论它的性能和优化问题,相信会对一些初 ...

  9. Coreseek:索引和检测的第二步骤施工

    1,非常索引easy,代码行 g:/service/coreseek/bin/indexer -c g:/service/coreseek/etc/csft_mysql.conf   person 在 ...

  10. ASP.NET MVC应用程序把文字写在图片上

    原文:ASP.NET MVC应用程序把文字写在图片上 Insus.NET实现这篇<MVC把随机产生的字符串转换为图片>http://www.cnblogs.com/insus/p/3624 ...