上一节:
下一节:

  AngularJS 过滤器

  • 过滤器定义

    可以在 AngularJS 中添加过滤器以格式化数据。
    AngularJS 提供了过滤器来转换数据：
    • currency 将数字格式化为货币格式。
    • date 将日期格式化为指定的格式。
    • filter 从数组中选择项的子集。
    • json 将对象格式化为JSON字符串。
    • limitTo 将数组/字符串限制为指定数量的元素/字符。
    • lowercase 将字符串格式化为小写
    • uppercase 将字符串格式设置为大写。
    • number 将数字格式化为字符串
    • orderBy 通过表达式对数组进行排序。

  • 向表达式添加过滤器

    可以使用竖线字符 | 将过滤器添加到表达式中，然后使用过滤器。
    uppercase 过滤器将字符串格式转换为大写： 
    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>蝴蝶教程(jc2182.com)</title>
<script src="//cdn.bootcss.com/angular.js/1.5.8/angular.min.js"></script>
</head>
<body>
  <div ng-app="myApp" ng-controller="personCtrl">
      <p>姓名： {{ lastName | uppercase }}</p>
  </div> 
  <script>
    angular.module('myApp', []).controller('personCtrl', function($scope) {
        $scope.firstName = "John",
        $scope.lastName = "Doe"
    });
  </script>
</body>
</html>
    lowercase 过滤器将字符串格式转换为小写： 
    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>蝴蝶教程(jc2182.com)</title>
<script src="//cdn.bootcss.com/angular.js/1.5.8/angular.min.js"></script>
</head>
<body>
    <div ng-app="myApp" ng-controller="personCtrl">
        <p>姓名： {{ lastName | lowercase }}</p>
    </div> 
    <script>
        angular.module('myApp', []).controller('personCtrl', function($scope) {
            $scope.firstName = "John",
            $scope.lastName = "Doe"
        });
    </script>
</body>
</html>

  • 将过滤器添加到指令

    通过使用竖线字符 |，将过滤器添加到指令（例如ng-repeat），然后加上过滤器：
    orderBy 过滤器对数组进行排序： 
    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>蝴蝶教程(jc2182.com)</title>
<script src="//cdn.bootcss.com/angular.js/1.5.8/angular.min.js"></script>
</head>
<body>
    <p>与对象循环：</p>
    <div ng-app="myApp" ng-controller="namesCtrl">
        <ul>
            <li ng-repeat="x in names | orderBy:'country'">
              {{ x.name + ', ' + x.country }}
            </li>
        </ul>
    </div> 
    <script>
       angular.module('myApp', []).controller('namesCtrl', function($scope) {
         $scope.names = [
            {name:'Jani',country:'Norway'},
            {name:'Carl',country:'Sweden'},
            {name:'Margareth',country:'England'},
            {name:'Hege',country:'Norway'},
            {name:'Joe',country:'Denmark'},
            {name:'Gustav',country:'Sweden'},
            {name:'Birgit',country:'Denmark'},
            {name:'Mary',country:'England'},
            {name:'Kai',country:'Norway'}
          ];
       });
    </script>
</body>
</html>

  • currency 过滤器

    currency 过滤器将数字格式化为货币： 
    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>蝴蝶教程(jc2182.com)</title>
<script src="//cdn.bootcss.com/angular.js/1.5.8/angular.min.js"></script>
</head>
<body>
    <div ng-app="myApp" ng-controller="costCtrl">
        <h1>价格: {{ price | currency }}</h1>
    </div> 
    <script>
        var app = angular.module('myApp', []);
        app.controller('costCtrl', function($scope) {
            $scope.price = 58;
        });
    </script>
    <p>currency 过滤器将数字格式化为货币格式。</p>
</body>
</html>

  • filter 过滤器

    filter 过滤器选择数组的子集。
    filter 过滤器只能在数组上使用，它返回仅包含匹配项的数组。
    下面示例返回包含字母 "i" 的名称： 
    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>蝴蝶教程(jc2182.com)</title>
<script src="//cdn.bootcss.com/angular.js/1.5.8/angular.min.js"></script>
</head>
<body>
    <div ng-app="myApp" ng-controller="namesCtrl">
        <ul>
            <li ng-repeat="x in names | filter : 'i'">
                {{ x }}
            </li>
        <ul>
    </div>
   
    <script>
        angular.module('myApp', []).controller('namesCtrl', function($scope) {
            $scope.names = [
                'Jani',
                'Carl',
                'Margareth',
                'Hege',
                'Joe',
                'Gustav',
                'Birgit',
                'Mary',
                'Kai'
            ];
        });
    </script>
</body>
</html>

  • 根据用户输入过滤数组

    通过在输入字段上设置 ng-model 指令，我们可以将输入字段的值用作过滤器中的表达式。
    下面示例返回在input中输入字母，列表将根据匹配项来返回包含字母的名称： 
    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>蝴蝶教程(jc2182.com)</title>
<script src="//cdn.bootcss.com/angular.js/1.5.8/angular.min.js"></script>
</head>
<body>
    <div ng-app="myApp" ng-controller="namesCtrl">
        <p>在input框中输入字母：</p>
        <p><input type="text" ng-model="test"></p>
        <ul>
            <li ng-repeat="x in names | filter:test">
                {{ x }}
            </li>
        <ul>
    </div>
   
    <script>
        angular.module('myApp', []).controller('namesCtrl', function($scope) {
            $scope.names = [
                'Jani',
                'Carl',
                'Margareth',
                'Hege',
                'Joe',
                'Gustav',
                'Birgit',
                'Mary',
                'Kai'
            ];
        });
    </script>
</body>
</html>

  • 根据用户输入对数组排序

    单击表标题以更改排序顺序：
    名字 国家
    {{x.name}} {{x.country}}
    通过在表头上添加 ng-click 指令，我们可以运行一个函数来更改数组的排序顺序： 
    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>蝴蝶教程(jc2182.com)</title>
<script src="//cdn.bootcss.com/angular.js/1.5.8/angular.min.js"></script>
</head>
<body>
    <div ng-app="myApp" ng-controller="namesCtrl">
      <table style="border:1px solid #333;">
             <colgroup>
             <col width="50%">
             <col width="50%">
             </colgroup>
             <thead>
             <tr>
             <th ng-click="orderByMe('name')" style="cursor: pointer;">名字 </th>
             <th ng-click="orderByMe('country')" style="cursor: pointer;">国家 </th>
             </tr>
             </thead>
             <tbody>
             <tr ng-repeat="x in names | orderBy:myOrderBy">
                 <td>{{x.name}} </td>
                 <td>{{x.country}} </td>
             </tr>
         </tbody>
      </table>
    </div>
    <script>
      angular.module('myApp', []).controller('namesCtrl', function($scope) {
        $scope.names = [
            {name:'张三',country:'中国'},
            {name:'Carl',country:'美国'},
            {name:'Margareth',country:'英国'},
            {name:'Hege',country:'澳大利亚'},
            {name:'Joe',country:'西班牙'},
            {name:'Gustav',country:'法国'},
            {name:'Birgit',country:'日本'},
            {name:'Mary',country:'英国'},
            {name:'李四',country:'中国'}
            ];
        $scope.orderByMe = function(x) {
            $scope.myOrderBy = x;
        }
     });
    </script>
</body>
</html>

  • 自定义过滤器

    您可以通过在 module(模块) 中注册新的过滤器工厂功能来制作自己的过滤器。
    创建一个名为 "myFormat" 的自定义过滤器： 
    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>蝴蝶教程(jc2182.com)</title>
<script src="//cdn.bootcss.com/angular.js/1.5.8/angular.min.js"></script>
</head>
<body>
   <ul ng-app="myApp" ng-controller="namesCtrl">
      <li ng-repeat="x in names">
         {{x | myFormat}}
      </li>
    <ul>
   
    <script>
       var app = angular.module('myApp', []);
       app.filter('myFormat', function() {
       return function(x) {
           var i, c, txt = "";
           for (i = 0; i < x.length; i++) {
           c = x[i];
           if (i % 2 == 0) {
               c = c.toUpperCase();
           }
           txt += c;
           }
           return txt;
       };
       });
       app.controller('namesCtrl', function($scope) {
          $scope.names = ['Jani', 'Carl', 'Margareth', 'Hege', 'Joe', 'Gustav', 'Birgit', 'Mary', 'Kai'];
       });
    </script>
</body>
</html>
    myFormat 筛选器会将所有不是2的百分余数的字符格式化为大写。
    有关过滤器的更多信息，请到我们的 AngularJS 参考手册 中阅读
上一节:
下一节: