在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,"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,5]|limitTo:-1}}
- </div>
8.orderBy 对象排序
- <div class="panel-body">
- //根id降序排
- <br />
- {{ [{"age": 20,"name": "test abc"}]
- | orderBy:'id':true }}
- <br />
- //根据id升序排
- <br />
- {{[{"age": 20,"name": "test abc"}]
- | orderBy:'id'}}
- </div>