angularjs自带过滤器
filter:
filter过滤器第一个参数若是对象:
<ul>
<li ng-repeat="friend in friends | filter:{'name':'John'}"><!--对象指定属性查找-->
<p>{{friend.name}} {{friend.phone}}</p>
</li>
</ul>
$scope.friends = [
{name: 'John', phone: '555-1212', age: 10},
{name: 'Mary', phone: '555-9876', age: 19},
{name: 'Mike', phone: '555-4321', age: 21},
{name: 'Adam', phone: '555-5678', age: 35},
{name: 'Adam', phone: '555-5678 John', age: 35},
{name: 'Julie', phone: '555-8765', age: 29}
];
结果:
如果我们希望对全部属性进行对比,可以将$当作键名:
<ul>
<li ng-repeat="friend in friends | filter:{'$':'John'}"><!--对象所有属性值查找 filter:{'$':'John'} 等同于filter:'John'-->
<p>{{friend.name}} {{friend.phone}}</p>
</li>
</ul>
结果:

orderBy:
第二个参数有值的情况:
<table class="friends">
<tr>
<th>Name</th>
<th>Phone Number</th>
<th>Age</th>
</tr>
<tr ng-repeat="friend in friends | orderBy:'age':true"><!--根据age降序排列-->
<td>{{friend.name}}</td>
<td>{{friend.phone}}</td>
<td>{{friend.age}}</td>
</tr>
</table>
第二个参数为true时,是根据age降序排列
结果:

若为false,则为升序排列:
<table class="friends">
<tr>
<th>Name</th>
<th>Phone Number</th>
<th>Age</th>
</tr>
<tr ng-repeat="friend in friends | orderBy:'age':false"><!--根据age升序排列-->
<td>{{friend.name}}</td>
<td>{{friend.phone}}</td>
<td>{{friend.age}}</td>
</tr>
</table>
结果:

filter与orderBy共用:
<input type="text" ng-model="age"/>
<table class="friends">
<tr>
<th>Name</th>
<th>Phone Number</th>
<th>Age</th>
</tr>
<tr ng-repeat="friend in friends | filter: age | orderBy:'age'"><!--fiter与orderBy共用-->
<td>{{friend.name}}</td>
<td>{{friend.phone}}</td>
<td>{{friend.age}}</td>
</tr>
</table>
结果:

JSON:
json过滤器可以将一个json或javascript对象转换成字符串。
<p>{{ {name:'aa',age:23} | json }}</p>
输出结果:
{ "name": "aa", "age": 23 }
Number:
<input type="text" ng-model="fraction"/>
<p>默认为3位 :{{fraction | number}}</p><!--12,345.679 四舍五入-->
<p>fractionSize为5位 :{{fraction | number:5}}</p><!--fractionSize为5位 :12,345.67890 自动补零-->
<p>fractionSize为0位 :{{fraction | number:0}}</p><!--fractionSize为0位 :12,346-->
<p>负数fractionSize为4位 :{{-fraction | number:4}}</p><!--fractionSize为4位 :-12,345.6789-->
<p>string类型测试 :{{str | number:4}}</p><!--string类型测试 :3,455.0000-->
<p>空字符串类型测试 :{{'' | number}}</p><!--空字符串类型测试 :0-->
<p>非数字字符串类型测试 :{{'test' | number}}</p><!--空字符串类型测试 :空字符串-->
注意:如果传入一个非数字字符,会返回空字符串。
$scope.str = '3455';
currency:
<input type="text" ng-model="price"/>
<p>default currency symbol ($):{{price | currency}}</p><!--default currency symbol ($): $12,345.68-->
<p>custom currency identifier (USD$):{{price | currency:'USD$'}}</p><!--custom currency identifier (USD$): USD$12,345.68-->
<p>fractions为2位:{{price | currency:'RMB':2}}</p><!--RMB12,345.68-->
<p>no fractions(0):{{price | currency:'RMB':0}}</p><!--RMB12,346-->
<p>string类型测试:{{str | currency:'RMB':2}}</p><!--string类型测试:RMB3,455.00-->
$scope.str = '3455';
limitTo:
<p><strong>数据类型是数组:</strong></p>
<p>从开始位置数组限制:{{numbers | limitTo:5}}</p><!--从开始位置数组限制:[1,2,3,4,5]-->
<p>从末尾位置数组限制:{{numbers | limitTo:-5}}</p><!--从末尾位置数组限制:[5,6,7,8,9]-->
<p>限制长度大于数组的长度:{{numbers | limitTo:15}}</p><!--限制长度大于数组的长度:[1,2,3,4,5,6,7,8,9] 整个数组会被输出-->
<p>第二个参数--从哪个位置开始截取:{{numbers | limitTo:3:4}}</p><!--第二个参数--从哪个位置开始截取:[5,6,7] 从索引为4的位置开始截取,包括此位置-->
<p><strong>数据类型是字符串:</strong></p>
<p>从开始位置字符串限制:{{letters | limitTo:5}}</p><!--从开始位置字符串限制:abcde-->
<p>从末尾位置字符串限制:{{letters | limitTo:-5}}</p><!--从末尾位置字符串限制:efghi-->
<p>限制长度大于字符串的长度:{{letters | limitTo:15}}</p><!--限制长度大于字符串的长度:abcdefghi 整个字符串会被输出-->
<p>第二个参数--从哪个位置开始截取:{{letters | limitTo:3:4}}</p><!--第二个参数--从哪个位置开始截取:efg 从索引为4的位置开始截取,包括此位置-->
<p><strong>数据类型是数字类型:</strong></p>
<p>从开始位置数字限制:{{longNumber | limitTo:5}}</p><!--从开始位置数字限制:23454-->
<p>从末尾位置数字限制:{{longNumber | limitTo:-5}}</p><!--从末尾位置数字限制:32342-->
<p>限制长度大于数字的长度:{{longNumber | limitTo:15}}</p><!--限制长度大于数字的长度:2345432342 整个数字会被输出-->
<p>第二个参数--从哪个位置开始截取:{{longNumber | limitTo:3:4}}</p><!--第二个参数--从哪个位置开始截取:432 从索引为4的位置开始截取,包括此位置-->
注意:如果传入的长度值大于被操作的数组或字符串的长度,那么整个字符串或数组或数字都会被返回。
$scope.numbers = [1,2,3,4,5,6,7,8,9];
$scope.letters = "abcdefghi";
$scope.longNumber = 2345432342;
http://www.cnblogs.com/wolf-sun/p/4752004.html
angularjs自带过滤器的更多相关文章
- 前端MVC学习总结——AngularJS验证、过滤器
前端MVC学习总结--AngularJS验证.过滤器 目录 一.验证 二.过滤器 2.1.内置过滤器 2.1.1.在模板中使用过滤器 2.1.2.在脚本中调用过滤函数 2.2.自定义过滤器 三.指令( ...
- angularjs 自带的过滤器
一,内置的过滤器 1,uppercase,lowercase大小转换 {{ "lower cap string" | uppercase }} //结果:LOWER CAP ...
- 前端MVC学习总结(二)——AngularJS验证、过滤器、指令
一.验证 angularJS中提供了许多的验证指令,可以轻松的实现验证,只需要在表单元素上添加相应的ng属性,常见的如下所示: <input Type="text" ng-m ...
- angularJS之使用过滤器转化输出 (angularJS系列最后一篇)
在视图模板中使用过滤器 过滤器也是一种服务,负责对输入的内容进行处理转换,以便更好地向用户显示. 过滤器可以在模板中的{{}}标记中使用: {{ expression | filter:arg1:ar ...
- 前端MVC学习笔记(二)——AngularJS验证、过滤器、指令
一.验证 angularJS中提供了许多的验证指令,可以轻松的实现验证,只需要在表单元素上添加相应的ng属性,常见的如下所示: <input Type="text" ng-m ...
- AngularJS中自定义过滤器
AngularJS中为我们提供了一些内置的过滤器,这里列举一些自定义过滤器的场景. 自定义过滤器,不带参赛 //过滤 不带参赛 app.filter('ordinal', function () { ...
- 【angularJS】Filter 过滤器
当从后台获取到的数据呈现到视图上时,此时可能需要对数据进行相应的转换,此时我们可以通过过滤器在不同页面进行不同数据的格式抓换,在AngularJS中有常见默认的过滤器,当然若不满足所需,我们可以自定义 ...
- angularjs之filter过滤器
现在公司用ionic,就是基于angularjs封装了一些api用于webapp,最近用的angularjs的filter确实省了很多代码,现在总结一下! ng比较鸡肋的过滤器,这里就一笔带过吧!鸡汤 ...
- AngularJS:自定义过滤器
表达式: {{ expression | filter1 | filter2 | ... }} {{ expression | filterName : paramet ...
随机推荐
- javascript-代理模式
JavaScript代理模式笔记 由于一个对象不能直接引用另一个对象,所以要用过代理对象在这两个对象之间起到中介作用 1.代理对象形式是通过script标签 demo实例实现的方式也被人称之为JSON ...
- UNIX系统的显示时间何时会到达尽头
本文分为三个小块: 一.UNIX系统中时间的存储形式: 二. time_t 的最大值是多少: 三. 将time_t 的最大值转化为真实世界的时间: #---------------------# # ...
- Java 中的 Filter 过滤器详解
Filter简介 Filter也称之为过滤器,它是Servlet技术中最实用的技术,WEB开发人员通过Filter技术,对web服务器管理的所有web资源:例如Jsp, Servlet, 静态图片文件 ...
- 搞ACM的你伤不起[转自RoBa]------(看一次,笑一次)
RoBa原创,转载请注明出处 劳资六年前开始搞ACM啊!!!!!!!!!! 从此踏上了尼玛不归路啊!!!!!!!!!!!! 谁特么跟劳资讲算法是程序设计的核心啊!!!!!! 尼玛除了面试题就没见过用 ...
- POJ2985 The k-th Largest Group[树状数组求第k大值+并查集||treap+并查集]
The k-th Largest Group Time Limit: 2000MS Memory Limit: 131072K Total Submissions: 8807 Accepted ...
- 第2章 Linux系统安装(3)_SSH连接Linux工具:SecureCRT和WinSCP
4. SSH连接Linux工具 4.1 Linux网卡配置 (1)临时配置: ifconfig eth0 192.168.32.100 //给eth0网卡指定IP,写在ROM里的,关机会丢失. (2) ...
- Linux进程管理子系统分析【转】
本文转载自:http://blog.csdn.net/coding__madman/article/details/51298732 Linux进程管理: 进程与程序: 程序:存放在磁盘上的一系列代码 ...
- bash/shell编程学习(1)
1)定义变量 myvar=abc #注:等号前后不能加空格 #或 myvar="abc" #或 myvar='abc' #注:如果变量后面的值中间本身没有空格,加不加引号都无所谓, ...
- CSS水平居中/垂直居中的N个方法
我看最近微博流行CSS居中技术,老外码农争相写相关的文章,一篇赛一篇的长啊,我把几篇归纳总结了一下,算是笔记. 孔乙己曾说:"茴香豆的回字有四种写法",万一哪天有个面试官问你:&q ...
- 【Python】[面向对象高级编程] 使用__slots__,使用@property
1.使用 __slots__ 给实例绑定方法, >>> def set_age(self, age): # 定义一个函数作为实例方法 ... self.age = age .. ...