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格式化为货币， 不改变单位符号， 小数部分将四舍五入 -->