在AngularJs中 ,过滤器可以使用一个管道符(|)添加到表达式和指令中 。
angularjs的filter功能可分为二种,一种是内置的过滤器,一种是自定义的。
AngularJs过滤去可用于转换数据。
内置过滤器,如下:
1.大小写转换
<div class="alert alert-info">
{{"lower cap string"|uppercase }}<br />
{{"Tank Is GOOD"|lowercase}}
</div>
2.json格式化(将对象转换成json字符串),默认输出就是json字符串
<div class="help-block">
{{ {name:'zhangsan',age:15} }}
<br />
{{ {name:'zhangsan',age:15 }|json }}
</div>
3.number格式化
<div class="alert alert-success">
{{1.2345|number:1}}
<br />
{{1.2345|number:3}}
<br />
{{1234567|number}}
</div>
4.currecy货币格式化
<div class="panel-body">
{{500|currency}}
<br />
{{250|currency:'RMB ¥ '}}
</div>
5.date格式化
<div>
{{ 1304375948024 |date}}
<br />
{{ dateOne |date:'hh:mm:ss'}}
<br />
{{ dateTwo |date:'yyyy-MM-dd hh:mm:ss'}}
<br />
{{ dateThree |date:'yyyy年MM月dd日'}}
<br />
</div>
<script>
//3. orderBy 过滤器格局表达式排序数组,字典排序可设置正序、倒叙
//默认升序
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope) {
$scope.dateOne = new Date();
console.info(new Date().toJSON());
$scope.dateTwo = new Date().toJSON();
// /Date(1464941268937)/
$scope.dateThree = '1464941268937';
});
</script>
6.filter查找
<div class="help-block">
//查找含有有4的行
<br />
{{ [{"age": 20,"id": 10,"name": "iphone"},
{"age": 12,"id": 11,"name": "sunm xing"},
{"age": 44,"id": 12,"name": "test abc"}]
| filter:'4' }}
<br />
//查找name含有iphone的行
<br />
{{ [{"age": 20,"id": 10,"name": "iphone"},
{"age": 12,"id": 11,"name": "sunm xing"},
{"age": 44,"id": 12,"name": "test abc"}]
| filter:{'name':'iphone'} }}
</div>
7.limitTo 字符串或对象的截取
<div class="alert alert-success">
{{'i want you'| limitTo:3}}
<br />
{{'i want you'| limitTo:-3}}
<br />
{{[1,3,5]|limitTo:1}}
<br />
{{[1,3,5]|limitTo:-1}}
</div>
8.orderBy 对象排序
<div class="panel-body">
//根id降序排
<br />
{{ [{"age": 20,"id": 10,"name": "iphone"},
{"age": 12,"id": 11,"name": "sunm xing"},
{"age": 44,"id": 12,"name": "test abc"}]
| orderBy:'id':true }}
<br />
//根据id升序排
<br />
{{[{"age": 20,"id": 10,"name": "iphone"},
{"age": 12,"id": 11,"name": "sunm xing"},
{"age": 44,"id": 12,"name": "test abc"}]
| orderBy:'id'}}
</div>