angularJs自定义filter

uppercase|lowercase:大小写转换过滤
json:json格式过滤
date:日期格式过滤
number:数字格式过滤
currency:货币格式过滤
filter:查找
limitTo:字符串对象截取,负数从后向前截取
orderBy:对象排序
<!-- 向表达式添加过滤器:可以通过一个管道字符(|)和一个过滤器添加到表达式中--> 
{{ person.lastName | uppercase }}
{{ person.lastName | lowercase }}  

<!-- 货币过滤 --> 
数量:<input type="number" ng-model="quantity">  
价格:<input type="number" ng-model="price">  
<p>总价 = {{ (quantity * price) | currency }}</p>  
{{250 |currency:"RMB ¥"}}

<!-- 向指令添加过滤器:可以通过一个管道字符(|)和一个过滤器添加到指令中-->  
<p>按国家的字母顺序排序对象:</p>  
<div ng-controller="namesController">  
<p>循环对象:</p>  
<ul>  
    <li ng-repeat="x in names | orderBy:'country'">  
        {{ x.name + ', ' + x.country }}  
    </li>  
</ul>  
<!--json格式过滤-->  
{{jsonText | json}
<!--date格式过滤-->  
{{1288323623006 | date:'yyyy-MM-dd HH:mm:ss'}}
<!--number格式过滤-->  
{{1.2345678 |number:1}}
<!--字符串截取-->  
{{ "i love tank" | limitTo:6 }}  
{{ "i love tank" | limitTo:-6 }}  
<!--对象排序:降序-->  
{{ [{"age": 20,"id": 10,"name": "iphone"},  
{"age": 12,"id": 11,"name": "sunm xing"},  
{"age": 44,"id": 12,"name": "test abc"}  
] | orderBy:'id':true }}<br/>  
<!--对象排序:升序-->  
{{ [{"age": 20,"id": 10,"name": "iphone"},  
{"age": 12,"id": 11,"name": "sunm xing"},  
{"age": 44,"id": 12,"name": "test abc"}  
] | orderBy:'id' }}  
<div ng-init="test=''">
    <p>输入过滤:</p>
    <p>
        <input type="text" ng-model="test" />
    </p>
    <ul ng-init="names=[{name:'1',country:'中文'},{name:'1',country:'哈哈文'}]">
        <li ng-repeat="x in names|filter:{'country':test}">
            {{x.country}}</li>
    </ul>
</div> 

2.AngularJs的控制器使用filter

$scope.uFirstName=$filter('uppercase')($scope.firstName);  
$scope.cPrice=$filter('currency')($scope.price,'RMB ¥');  

3.AngularJs自定义filter过滤器

//页面{{test|replaceHello:3:5}}
   //自定义过滤器  
   myApp.filter('replaceHello',function(){  
       return function(input,n1,n2){  
           console.log(input);  
           console.log(n1);  
           console.log(n2);  
           return input.replace(/Hello/,'您好');  
       }  
   });
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值