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>

8、json过滤器

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

结果：

{

"message": "aBcDeF",

"city": [

{

"name": "上海",

"py": "shanghai"

},

{

"name": "北京",

"py": "beijing"

},

{

"name": "四川",

"py": "sichuan"

}

]

}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!