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.

具体语法：

limit是必选项，begin是可选项；

number过滤器：格式化（保留小数）这里会进行四舍五入

<div ng-app>{{1459824.1542558 | number:2}}</div>
// 效果：1,459,824.15

接下来的过滤器，在使用过程中在做阐述；