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 参考手册 中阅读