angular过滤器

前端之家收集整理的这篇文章主要介绍了angular过滤器前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

1、数字过滤器

<!-- 过滤数字结果:1,231,423,123 -->
<p>{{1231423123 | number}}</p>
<!-- 带参数的结果:1,123.000 -->
<p>{{1231423123 | number:3}}</p>

2、货币过滤器

<!-- 过滤货币结果:$999,999.00 -->
<p>{{999999 | currency}}</p>
<!-- 过滤货币结果:RMB 999,999.00 -->
<p>{{999999 | currency:'RMB '}}</p>

3、时间过滤器

<!-- 结果:"2017-10-08T01:41:28.299Z" -->
<p>{{today}}</p>
<!-- 结果:Oct 8,2017 9:41:28 AM -->
<p>{{today | date:'medium'}}</p>
<!-- 结果:10/8/17 9:42 AM -->
<p>{{today | date:'short'}}</p>
<!-- 结果:Sunday,October 8,2017 -->
<p>{{today | date:'fullDate'}}</p>
<!-- 结果:October 8,2017 -->
<p>{{today | date:'longDate'}}</p>
<!-- 结果:Oct 8,2017 -->
<p>{{today | date:'mediumDate'}}</p>
<!-- 结果:10/8/17 -->
<p>{{today | date:'shortDate'}}</p>
<!-- 结果:9:44:48 AM -->
<p>{{today | date:'mediumTime'}}</p>
<!-- 结果:9:44 AM -->
<p>{{today | date:'shortTime'}}</p>
<!-- 结果:2017/10/08 09:52:20 -->
<p>{{today | date:'yyyy/MM/dd HH:mm:ss'}}</p>

4、截取过滤器

<!-- 结果:[1,2,3] -->
<p>{{[1,3,4,5,6,7,8] | limitTo:3}}</p>
<!-- 结果:[6,8] -->
<p>{{[1,8] | limitTo:-3}}</p>

5、转大小写过滤器

<!-- 结果:dancheng -->
<p>{{name | lowercase}}</p>
<!-- 结果:DANCHENG -->
<p>{{name | uppercase}}</p>

6、filter过滤器

filter只匹配要过滤的value

初始数据:

city : [
    {
        name:'上海',py:'shanghai'
    },{
        name:'北京',py:'beijing'
    },{
        name:'四川',py:'sichuan'
    }
]

使用:

<!-- 结果:[{"name":"上海","py":"shanghai"}] -->
<p>{{data.city | filter:'上海'}}</p>
<!-- 结果:[] -->
<p>{{data.city | filter:'name'}}</p>
<!-- 结果:[{"name":"上海","py":"shanghai"},{"name":"北京","py":"beijing"}] -->
<p>{{ data.city | filter : {py:'g'} }}</p>

7、OrderBy过滤器

<!-- 结果:[{"name":"北京","py":"beijing"},{"name":"上海",{"name":"四川","py":"sichuan"}] -->
<p>{{data.city | orderBy : 'py'}}</p>
<!-- 结果:[{"name":"四川","py":"sichuan"},"py":"beijing"}] -->
<p>{{data.city | orderBy : '-py'}}</p>

8json过滤器

var jsonString = $filter('json')($scope.data)
console.log(jsonString)

结果:

{

"message": "aBcDeF",

"city": [

{

"name": "上海",

"py": "shanghai"

},

{

"name": "北京",

"py": "beijing"

},

{

"name": "四川",

"py": "sichuan"

}

]

}

原文链接:https://www.f2er.com/angularjs/145958.html

猜你在找的Angularjs相关文章