一、为什么使用过滤器？
在实际操作中，我们需要对统一数据源进行多次转换，比如我的货币单位，在不同的国家我们将用不同的符号表示。因此，你可能会想到在控制器中判断国家以显示不同的结果，但是过滤器却可以更好的帮助我们做到同样的效果。
过滤器将数据在被指令处理并显示到视图之前进行转换，而不必修改作用域中原有的数据，这样能够允许同一份数据在应用中的不同部分以不同形式得以展示。
接下来，我们详细讨论有关过滤器的用法
二、过滤单个数据的值
下表展示用于单个数据的内置过滤器
先来看看我们的准备案例，待会我们将在这个案例的基础上来使用内容过滤器
<!DOCTYPE> <!-- use module --> <html ng-app="exampleApp"> <head> <title>Angluar test</title> <meta charset="utf-8"/> <link type="text/css" href="https://www.jb51.net/css/bootstrap.min.css" > <link type="text/css" href="https://www.jb51.net/css/bootstrap-theme.min.css" > </head> <body> <dlv ng-controller="defaultCtrl"> <div> Products <span>{{products.length}}</span> </div> <div> <table> <thead> <tr><th>Name</th><th>Category</th><th>Expiry</th><th>Price</th></tr> </thead> <tbody> <tr ng-repeat="p in products"> <td>{{p.name}}</td> <td>{{p.category}}</td> <td>{{p.expiry}}</td> <td>{{p.price}}</td> </tr> </tbody> </table> </div> </dlv> <script type="text/javascript" src="https://www.jb51.net/js/angular.min.js"></script> <script type="text/javascript"> var myApp = angular.module("exampleApp", []); myApp.controller("defaultCtrl", function ($scope) { $scope.products = [ { name: "Apples", category: "Fruit", price: 1.20, expiry: 10 }, { name: "Bananas", category: "Fruit", price: 2.42, expiry: 7 }, { name: "Pears", category: "Fruit", price: 2.02, expiry: 6 }, { name: "Tuna", category: "Fish", price: 20.45, expiry: 3 }, { name: "Salmon", category: "Fish", price: 17.93, expiry: 2 }, { name: "Trout", category: "Fish", price: 12.93, expiry: 4 }, { name: "Beer", category: "Drinks", price: 2.99, expiry: 365 }, { name: "Wine", category: "Drinks", price: 8.99, expiry: 365 }, { name: "Whiskey", category: "Drinks", price: 45.99, expiry: 365 } ]; }) </script> </body> </html>
就是一个表格的形式来展示产品的详细情况的案例
1.格式化货币值
<tr ng-repeat="p in products"> <td>{{p.name}}</td> <td>{{p.category}}</td> <td>{{p.expiry}}</td> <!-- 使用currency --> <td>{{p.price | currency}}</td> </tr>
2.格式化数字值
<tr ng-repeat="p in products"> <td>{{p.name}}</td> <td>{{p.category}}</td> <td>{{p.expiry}}</td> <!-- 保留小数点后3位 --> <td>{{p.price | number : 3}}</td> </tr>
3.格式化日期
// 在控制器中添加 $scope.getExpiryDate = function (days) { var now = new Date(); return now.setDate(now.getDate() + days); }
<tr ng-repeat="p in products"> <td>{{p.name}}</td> <td>{{p.category}}</td> <!-- 在视图中使用--> <td>{{getExpiryDate(p.expiry) | date : 'yyyy/MM/dd'}}</td> <!-- 货币单位本地化 --> <td>{{p.price}}</td> </tr>
4.改变字符串大小写
<tr ng-repeat="p in products"> <!-- 字母大小写 --> <td>{{p.name | uppercase}}</td> <td>{{p.category | lowercase}}</td> <td>{{getExpiryDate(p.expiry) | date : 'yyyy/MM/dd'}}</td> <!-- 货币单位本地化 --> <td>{{p.price}}</td> </tr>
5.生成JSON