在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>