本篇主要介绍过滤器的基本用法:
过滤器用来对数据进行格式的转换,数据格式的转化与逻辑无关,因此,我们使用过滤器来进行这些操作:
{{expression | filter1:,参数1,参数2... | filter2: 参数1,参数2... }}
expression : 表达式,也就是还没有经过过滤的变量值,相当于普通的 {{}}里面的内容
filter1 : 过滤器的名字,可以是angular内置的过滤器,也可以自定义过滤器(在下一篇里讲解)
参数1,参数2,... : 需要被传递给过滤器函数的参数,可以有多个
过滤器可以通过 "|" 进行多次过滤
下面来看一些angular内置的过滤器的基本用法:
<!DOCTYPE html> <html ng-app> <head> <title>13.1过滤器</title> <meta charset="utf-8"> <script src="../angular.js"></script> <script src="script.js"></script> </head> <body> <div ng-controller="filter"> <span>{{num | number:2 }}</span> <br> <span>{{num | number:0 }}</span> <br> <span>{{num | number:0 | currency }}</span> <br> <span>{{num | currency }}</span> <br> <span>{{day | date }}</span> <br> <span>{{word | uppercase}}</span> </div> </body> </html>
function filter($scope){ $scope.word = 'code_bunny'; $scope.day = 1302375948026; $scope.num = 12.956; }
1.{{num | currency }}
currency: 把数字过滤成美元,四舍五入格式化成小数点后两位.
2. {{num | number:0 }}
number: 格式化数字,后面的参数表示格式化时保留小数点后面的个数,0就是不保留小数,1就是取一位,四舍五入
3. {{num | number:0 | currency }}
number | currency : 先格式化数字,再格式化成美元
4. {{word | uppercase}}
uppercase : 将单词的小写转为大写
这里只是举例,还有很多内置的angular过滤器.详细可以看手册
--------------------------------------------------------------------------------------------------------
遗留问题:
1.currency过滤器如果不要格式化到小数点后面2位的话,不知道怎么处理,现在即使给一个没有小数的整数,比如12,它也会格式化为$12.00