码迷,mamicode.com
首页 > Web开发 > 详细

angularJS的过滤器!

时间:2017-07-23 00:45:10      阅读:328      评论:0      收藏:0      [点我收藏+]

标签:script   ext   四舍五入   oca   长度   div   用户   选项   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

 

接下来的过滤器,在使用过程中在做阐述;

 

angularJS的过滤器!

标签:script   ext   四舍五入   oca   长度   div   用户   选项   angularjs   

原文地址:http://www.cnblogs.com/e0yu/p/7223349.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!