angularJS 过滤器


1.数字格式化过滤器 number

{{ 123456789 | number }}     结果:12,345,678  每3位用逗号分隔
{{ 12345.6789 | number:2 }}  结果:12,345.68   每3位用逗号分隔,并保留2位小数

2.现金格式化过滤器 currency

{{ 999999 | currency }}     结果: $999,999.00
{{999999 | currency:'rmb'}} 结果: rmb999,999.00

3.日期格式化过滤器  date

 {{today}}   "2016-10-13T03:25:45.137Z"

{{today | date:'short'}}       10/13/16 11:29 AM 
{{today | date:'medium'}}      Oct 13, 2016 11:29:20 AM 
{{today | date:'shortDate'}}   10/13/16 
{{today | date:'mediumDate'}}  Oct 13, 2016 
{{today | date:'longDate'}}    October 13, 2016 
{{today | date:'fullDate'}}    Thursday, October 13, 2016 
{{today | date:'mediumTime'}}  11:29:20 AM 
{{today | date:'shortTime'}}   11:29 AM

{{ today | date:'y-MM-d H:m:s' }}         2016-10-13 11:32:2
{{ today | date:'yyyy-MM-dd HH:mm:ss' }}  2016-10-13 11:32:02

4.大小写格式化过滤器  lowercase  uppercase

{{ 'AbCdddEEE' | lowercase }}   结果:abcdddeee
{{ 'AbCdddEEE' | uppercase }}   结果:ABCDDDEEE

5.限制数组输出个数过滤器  limitTo

 {{ [1,2,3,4,5,6,7] | limitTo:3 }}   结果: [1,2,3]  输出前3个
 {{ [1,2,3,4,5,6,7] | limitTo:-3 }}  结果: [5,6,7]  输出最后3个

6.数组排序过滤器  orderBy

{{ city }} 为:  [ {name:'上海',py:'shanghai'},{name:'北京',py:'beijing'},{name:'四川',py:'sichuan'} ]

按某个属性正序排列: 
{{  city | orderBy:'py' }}
结果: [{"name":"北京","py":"beijing"},{"name":"上海","py":"shanghai"},{"name":"四川","py":"sichuan"}] 

按某个属性倒序排列:
{{ city | orderBy:'-py' }}
结果: [{"name":"四川","py":"sichuan"},{"name":"上海","py":"shanghai"},{"name":"北京","py":"beijing"}]

7.数组过滤器  filter

{{ city | filter:'上海'}}      结果: [{"name":"上海","py":"shanghai"}]
{{ city | filter:'h'}}         结果: [{"name":"上海","py":"shanghai"},{"name":"四川","py":"sichuan"}]
{{ city | filter:{ py:'g' } }} 结果: [{"name":"上海","py":"shanghai"},{"name":"北京","py":"beijing"}]

8.控制器内使用过滤器和自定义过滤器
html:
 <p>
            使用自定义过滤器:
            {{ data.city | filter : checkName }}
 </p>

js:

var app=angular.module('myApp',[]);
app.factory('Data',function(){
    return {
        message:'HELLO KuGou!',
        city:[
            {name:'上海',py:'shanghai'},
            {name:'北京',py:'beijing'},
            {name:'四川',py:'sichuan'}
        ]
    };
});
app.controller("myCtrl1",function($scope,Data,$filter){
    $scope.data=Data;

    var nubmer=$filter('number')('3000');        //使用number过滤器

    var jsonString=$filter('json')($scope.data); //使用json过滤器 主要用于调试 格式化json方便查看
    console.log(jsonString);

    $scope.checkName=function(obj){              //自定义一个过滤器
       if(obj.py.indexOf('h') === -1){
           return false;
       }return true;
    };
});


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值