AngularJS的Filter用法详解

前端之家收集整理的这篇文章主要介绍了AngularJS的Filter用法详解前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

Filter简介

Filter是用来格式化数据用的。

Filter的基本原型( '|' 类似于Linux中的管道模式):

{{ expression | filter }}

Filter可以被链式使用(即连续使用多个filter):

{{ expression | filter1 | filter2 | ... }}

Filter也可以指定多个参数:

{{ expression | filter:argument1:argument2:... }}

AngularJS内建的Filter

AngularJS内建了一些常用的Filter,我们一一来看一下。

currencyFilter(currency):

用途:格式化货币

方法原型:

function(amount,currencySymbol,fractionSize)

用法

1 {{ 12 | currency}}  <!--将12格式化为货币,默认单位符号为 '$',小数默认2位-->
2 
3 {{ 12.45 | currency:'¥'}} 将12.45格式化为货币,使用自定义单位符号为 '¥',128)">4 
5 {{ 12.45 | currency:'CHY¥':1}} 将12.45格式化为货币,使用自定义单位符号为 'CHY¥',小数指定1位,会执行四舍五入操作 6 
7 {{ 12.55 | currency:undefined:0}} 将12.55格式化为货币, 不改变单位符号, 小数部分将四舍五入 -->

dateFilter(date):

用途:格式化日期

function(date,format,timezone)

使用ISO标准日期格式 --> {{ '2015-05-20T03:56:16.887Z' | date:"MM/dd/yyyy @ h:mma"}} 使用13位(单位:毫秒)时间戳 --> {{ 1432075948123 | date:"MM/dd/yyyy @ h:mma"}} 指定timezone为UTC --> {{ 1432075948123 | date:"MM/dd/yyyy @ h:mma":"UTC"}}

用法1(参数expression使用String):

1 <div ng-init="myArr = [{name:'Tom',age:20},{name:'Tom Senior',age:50},{name:'May',age:21},{name:'Jack',{name:'Alice',age:22}]"> 2 参数expression使用String,将全文搜索关键字 'a' 3 ng-repeat="u in myArr | filter:'a' "4 p>Name:{{u.name}}</5 >Age:{{u.age}}6 br /> 7 div8 >
用法2(参数expression使用function):

1 // 先在Controller中定义function: myFilter 2 $scope.myFilter = function (item) { 3 return item.age === 20; 4 }; 5 6 ="u in myArr | filter:myFilter " 7 8 9 10 >

numberFilter(number):

function(number,204); overflow:auto; font-family:"Courier New"!important"> 
 
{{ "3456789" | number}}
/>
{{ true | number}}
/>
{{ 12345678 | number:1}}

orderByFilter(orderBy):

2 deposit前面的'-'表示deposit这列倒叙排序,默认为顺序排序 3 参数reverseOrder:true表示结果集倒叙显示="u in myArr | orderBy:['name','-deposit']:true" 5 >Deposit:{{u.deposit}} 自定义Filter

和Directive一样,如果内建的Filter不能满足你的需求,你当然可以定义一个专属于你自己的Filter。我们来做一个自己的Filter:capitalize_as_you_want,该Filter会使你输入的字符串中的首字母、指定index位置字母以及指定的字母全部大写。

function (input,capitalize_index,specified_char)

完整的示例代码:

猜你在找的Angularjs相关文章