参考手册
AngularJS 作用域
AngularJS 服务

AngularJS 过滤器

可以在 AngularJS 中添加过滤器来格式化数据。

AngularJS 过滤器

AngularJS 提供用于转换数据的筛选器:

  • currency 将数字格式化为货币格式。
  • date 将日期格式化为指定格式。
  • filter 从数组中选择项目的子集。
  • json 将对象格式化为JSON字符串。
  • limitTo 将数组/字符串限制为指定数量的元素/字符。
  • lowercase 将字符串格式化为小写。
  • number 将数字格式化为字符串。
  • orderBy 通过表达式对数组进行排序。
  • uppercase 将字符串格式化为大写。

表达式增加过滤器

可以使用管道字符 |，后跟过滤器，将过滤器添加到表达式中。

大写过滤器将字符串格式化为大写:

实例
  1. <!DOCTYPE html>
  2. <html>
  3. <script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
  4. <body>
  6. <div ng-app="myApp" ng-controller="personCtrl">
  8. <p>名称是 {{ lastName | uppercase }}</p>
  10. </div>
  12. <script>
  13. angular.module('myApp', []).controller('personCtrl', function($scope) {
  14.     $scope.firstName = "John",
  15.     $scope.lastName = "Doe"
  16. });
  17. </script>
  19. </body>
  20. </html>
运行一下

lowercase 过滤器将字符串格式化为小写:

实例
  1. <!DOCTYPE html>
  2. <html>
  3. <script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
  4. <body>
  6. <div ng-app="myApp" ng-controller="personCtrl">
  8. <p>名称是 {{ lastName | lowercase }}</p>
  10. </div>
  12. <script>
  13. angular.module('myApp', []).controller('personCtrl', function($scope) {
  14.     $scope.firstName = "John",
  15.     $scope.lastName = "Doe"
  16. });
  17. </script>
  19. </body>
  20. </html>
运行一下

指令添加过滤器

通过使用管道字符 |，后跟过滤器，将过滤器添加到指令中，如 ng-repeat:

实例

orderBy 过滤器对数组进行排序:

  1. <!DOCTYPE html>
  2. <html>
  3. <script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
  4. <body>
  6. <div ng-app="myApp" ng-controller="namesCtrl">
  8. <p>循环对象:</p>
  9. <ul>
  10.   <li ng-repeat="x in names | orderBy:'country'">
  11.     {{ x.name + ', ' + x.country }}
  12.   </li>
  13. </ul>
  15. </div>
  17. <script>
  18. angular.module('myApp', []).controller('namesCtrl', function($scope) {
  19.     $scope.names = [
  20.         {name:'Jani',country:'Norway'},
  21.         {name:'Carl',country:'Sweden'},
  22.         {name:'Margareth',country:'England'},
  23.         {name:'Hege',country:'Norway'},
  24.         {name:'Joe',country:'Denmark'},
  25.         {name:'Gustav',country:'Sweden'},
  26.         {name:'Birgit',country:'Denmark'},
  27.         {name:'Mary',country:'England'},
  28.         {name:'Kai',country:'Norway'}
  29.         ];
  30. });
  31. </script>
  33. </body>
  34. </html>
运行一下

货币过滤器

currency 过滤器将数字格式化为货币

实例
  1. <!DOCTYPE html>
  2. <html>
  3. <script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
  4. <body>
  6. <div ng-app="myApp" ng-controller="costCtrl">
  8. <h2>价格: {{ price | currency }}</h2>
  10. </div>
  12. <script>
  13. var app = angular.module('myApp', []);
  14. app.controller('costCtrl', function($scope) {
  15.     $scope.price = 58;
  16. });
  17. </script>
  19. <p>货币过滤器将数字格式化为货币格式。</p>
  21. </body>
  22. </html>
运行一下

filter 过滤器

filter 过滤器选择数组的子集。

filter 过滤器只能用于数组，它返回一个只包含匹配项的数组。

实例

返回包含字母 "i" 的名称:

  1. <!DOCTYPE html>
  2. <html>
  3. <script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
  4. <body>
  6. <div ng-app="myApp" ng-controller="namesCtrl">
  8. <ul>
  9.   <li ng-repeat="x in names | filter : 'i'">
  10.     {{ x }}
  11.   </li>
  12. </ul>
  14. </div>
  16. <script>
  17. angular.module('myApp', []).controller('namesCtrl', function($scope) {
  18.     $scope.names = [
  19.         'Jani',
  20.         'Carl',
  21.         'Margareth',
  22.         'Hege',
  23.         'Joe',
  24.         'Gustav',
  25.         'Birgit',
  26.         'Mary',
  27.         'Kai'
  28.     ];
  29. });
  30. </script>
  32. <p>本例仅显示包含字母 "i" 的名称。</p>
  34. </body>
  35. </html>
运行一下

根据用户输入过滤数组

通过在输入字段上设置 ng-model 指令，我们可以将输入字段的值用作过滤器中的表达式。

在输入字段中键入一个字母，列表将根据匹配情况收缩/增长：通过在表头上添加 ng-click 指令，我们可以运行一个函数来更改数组的排序顺序:

实例
  1. <!DOCTYPE html>
  2. <html>
  3. <script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
  4. <body>
  6. <div ng-app="myApp" ng-controller="namesCtrl">
  8. <p>在输入框中输入一个字母:</p>
  10. <p><input type="text" ng-model="test"></p>
  12. <ul>
  13.   <li ng-repeat="x in names | filter:test">
  14.     {{ x }}
  15.   </li>
  16. </ul>
  18. </div>
  20. <script>
  21. angular.module('myApp', []).controller('namesCtrl', function($scope) {
  22.     $scope.names = [
  23.         'Jani',
  24.         'Carl',
  25.         'Margareth',
  26.         'Hege',
  27.         'Joe',
  28.         'Gustav',
  29.         'Birgit',
  30.         'Mary',
  31.         'Kai'
  32.     ];
  33. });
  34. </script>
  36. <p>该列表将只包含与过滤器匹配的名称。</p>
  39. </body>
  40. </html>
运行一下

自定义过滤器

您可以通过在模块中注册新的过滤器工厂功能来制作自己的过滤器:

实例

做一个名叫 "myFormat" 的自定义过滤器:

  1. <!DOCTYPE html>
  2. <html>
  3. <script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
  4. <body>
  6. <p>单击表格标题以更改排序顺序:</p>
  8. <div ng-app="myApp" ng-controller="namesCtrl">
  10. <table border="1" width="100%">
  11. <tr>
  12. <th ng-click="orderByMe('name')">名称</th>
  13. <th ng-click="orderByMe('country')">国家</th>
  14. </tr>
  15. <tr ng-repeat="x in names | orderBy:myOrderBy">
  16. <td>{{x.name}}</td>
  17. <td>{{x.country}}</td>
  18. </tr>
  19. </table>
  21. </div>
  23. <script>
  24. angular.module('myApp', []).controller('namesCtrl', function($scope) {
  25.     $scope.names = [
  26.         {name:'Jani',country:'Norway'},
  27.         {name:'Carl',country:'Sweden'},
  28.         {name:'Margareth',country:'England'},
  29.         {name:'Hege',country:'Norway'},
  30.         {name:'Joe',country:'Denmark'},
  31.         {name:'Gustav',country:'Sweden'},
  32.         {name:'Birgit',country:'Denmark'},
  33.         {name:'Mary',country:'England'},
  34.         {name:'Kai',country:'Norway'}
  35.         ];
  36.     $scope.orderByMe = function(x) {
  37.         $scope.myOrderBy = x;
  38.     }
  39. });
  40. </script>
  42. </body>
  43. </html>
运行一下

myFormat 过滤器将其他字符格式化为大写。

AngularJS 作用域
AngularJS 服务

分类导航