AngularJS的Filter用法详解
1 <div> 2 条件: <input type="text" ng-model="yyy"> 3 <ul> 4 <li ng-repeat="phone in phones| filter:yyy">{{phone.name}}</li> 5 </ul> 6 </div> 7 8 </body> 9 <script src="../lib/angular/angular.js"></script> 10 <script> 11 angular.module('zfpxMod',[]); 12 angular.module('zfpxMod').controller('zfpxCtrl',function($scope){ 13 $scope.phones = [ 14 {name:'三儿子',age:'1'}, 15 {name:'huawei',age:'2'}, 16 {name:'xiaomi',age:'3'} 17 ] 18 }); 19 </script>
Filter简介:过滤变量的值,或者格式化输出,得到自己所期望的结果或格式
Filter是用来格式化数据用的。
Filter的基本原型( '|' 类似于Linux中的管道模式):
{{ expression | filter }}
Filter可以被链式使用(即连续使用多个filter):
{{ expression | filter1 | filter2 | ... }}
Filter也可以指定多个参数:
{{ expression | filter:argument1:argument2:... }}
方法原型:
function(amount, currencySymbol, fractionSize)
用法:
1 {{ 12 | currency}} <!--将12格式化为货币,默认单位符号为 '$', 小数默认2位-->
2
3 {{ 12.45 | currency:'¥'}} <!--将12.45格式化为货币,使用自定义单位符号为 '¥', 小数默认2位-->
4
5 {{ 12.45 | currency:'CHY¥':1}} <!--将12.45格式化为货币,使用自定义单位符号为 'CHY¥', 小数指定1位, 会执行四舍五入操作 -->
6
7 {{ 12.55 | currency:undefined:0}} <!--将12.55格式化为货币, 不改变单位符号, 小数部分将四舍五入 -->