angularJS过滤器:
filter
currency
date
filter
json
limitTo
lowercase
number
orderBy
uppercase
......
Filter过滤器:
过滤器的主要用途就是一个格式化 / 筛选数据的小工具;
一般用于服务端存储的数据转换为用户界面可以理解的数据;
常见需要使用Filter的数据有:
- 时间 1288323623006
currency:它是用来过滤货币:
作用把数字过滤成 一个货币:
使用:竖杠+过滤器名称
<div ng-app=>
<h1>{{20000 | currency}}</h1>
</div>
//效果:$20,000.00
没有多少意义,国际标准货币,对我们不实用;
date :转化为时间:
<div ng-app=>
<h1>{{1288323623006 | date}}</h1>//效果 Oct 29, 2010
<h1>{{1288323623006 | date:'yyyy-MM-dd HH:mm:ss'}}</h1>//效果 2010-10-29 11:40:23
// 这里是英文的
可以使用 angular-locale_zh-cn.js 来进行汉化
</div>
json过滤器:
<div ng-app="myApp" ng-controller="myAppController">
{{jsonDate}}<br>
{{jsonDate | json}}
</div>
<script type="text/javascript">
var myApp = angular.module('myApp',[]);
myApp.controller('myAppController',['$scope',function($scope){
$scope.jsonDate = {
zifuchuan:'张三',
shuzi:19,
bool:false,
json:{name:'老王',age:18},
shuzu:[{name:'老王',age:'18'},{name:'老王',age:'18'}]
};
}]);
</script>
limitTo过滤器:限制到:
作用:用来控制字符串展示多少长度;
<div ng-app>{{'www.baidu.com,baidu.com' | limitTo:10}}</div>
//www.baidu.
具体语法:
{{limiTo_expression | limitTo:limit:begin}}
limit是必选项,begin是可选项;
number过滤器: 格式化(保留小数)这里会进行四舍五入
<div ng-app>{{1459824.1542558 | number:2}}</div>
// 效果:1,459,824.15
接下来的过滤器,在使用过程中在做阐述;