angularJS的过滤器!
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
接下来的过滤器,在使用过程中在做阐述;