AngularJS 过滤器

AngularJS过滤器重要包含两类，一类是内置过滤器；另外一个类是自定义过滤器。
下面是常用的几种过滤器
过滤器	描述
uppercase	将字符转换为大写
lowercase	将字符转换为小写
currency	将数字转换为货币格式
orderBy	排序
filter	从数组中筛选一个子集
过滤器可以使用管道字符“|”添加到表达式和指令当中
例如将字符串转化为大写
<span >{{"tom IS A boy"|uppercase}}</span>
下面是常用表达式的代码示例：
  1 <html>
  2 <head>
  3     <title></title>
  4     <meta charset="utf-8" />
  5     <script src="js/angular.min.js"></script>
  6     <style>
  7         .frame {
  8             height: 250px;
  9             padding: 20px;
 10             margin: 20px;
 11             background-color: lightblue;
 12             border: 1px solid black;
 13         }
 14     </style>
 15 </head>
 16 <body ng-app="myApp">
 17     <div ng-controller="myCtrl">
 18 
 19         <div class="frame">
 20             <!--转换为大写-->
 21             <h3>转换为大写</h3>
 22             <span >{{"tom IS A boy"|uppercase}}</span><br />
 23             <!--转换为小写-->
 24             <h3>转换为小写</h3>
 25             <span >{{"tom IS A boy"|lowercase}}</span><br />
 26             <!--转换为货币-->
 27             <h3>转换为货币</h3>
 28             <span>{{100 | currency}}</span>
 29         </div>
 30         <!--过滤筛选-->
 31         <div class="frame">
 32             <h3>输入过滤</h3>
 33             <span>筛选记录</span><input ng-model="test" type="text" />
 34             <ul>
 35                 <li ng-repeat="item in names | filter :test ">
 36                     {{item.name +" "+item.age}}
 37                 </li>
 38             </ul>
 39         </div>
 40         <!--自定义过滤器-->
 41         <div class="frame">
 42             <h3>自定义过滤器</h3>
 43             {{"Tom" | sayHello}}
 44         </div>
 45 
 46         <!--记录条数过滤-->
 47         <div class="frame">
 48             <h3>记录条数过滤</h3> 
 49         显示条数：<input ng-model="pageCount" type="number"/>
 50             <ul>
 51                 <li ng-repeat="item in names | limitTo:pageCount">
 52                     {{item.name +" "+item.age}}
 53                 </li>
 54             </ul>
 55         </div>
 56 
 57         <div class="frame">
 58             <h3>输入过滤</h3>
 59             <span>筛选记录</span><input ng-model="test" type="text" />
 60             <ul>
 61                 <li ng-repeat="item in names | filter :test ">
 62                     {{item.name +" "+item.age}}
 63                 </li>
 64             </ul>
 65         </div>
 66 
 67         <!--默认排序-->
 68         <div class="frame">
 69             <h3>按照年龄默认排序</h3>
 70             <ul>
 71                 <li ng-repeat="itme in names">
 72                     {{"姓名："+itme.name +"  年龄：" + itme.age}}
 73                 </li>
 74             </ul>
 75         </div>
 76         <!--升序-->
 77         <div class="frame">
 78             <h3>按照年龄升序</h3>
 79             <ul>
 80                 <li ng-repeat="itme in names | orderBy:'age'">
 81                     {{"姓名："+itme.name +"  年龄：" + itme.age}}
 82                 </li>
 83             </ul>
 84         </div>
 85         <!--倒序-->
 86         <div class="frame">
 87             <h3>按照年龄倒序</h3>
 88             <ul>
 89                 <li ng-repeat="itme in names | orderBy:'-age'">
 90                     {{"姓名："+itme.name +"  年龄：" + itme.age}}
 91                 </li>
 92             </ul>
 93         </div>
 94 
 95         <!--多属性排序-->
 96         <div class="frame">
 97             <h3>年龄正序 姓名倒序</h3>
 98             <ul>
 99                 <li ng-repeat="itme in names | orderBy:['age','-name']">
100                     {{"姓名："+itme.name +"  年龄：" + itme.age}}
101                 </li>
102             </ul>
103         </div>
104 
105         <!--动态排序-->
106         <div class="frame">
107             <h3>
108                 按照年龄排序
109                 <button ng-click="sort()">{{sortText}}</button>
110             </h3>
111             <ul>
112                 <li ng-repeat="itme in names | orderBy:sortFlag">
113                     {{"姓名："+itme.name +"  年龄：" + itme.age}}
114                 </li>
115             </ul>
116         </div>
117     </div>
118 
119 
120     <script>
121         var app = angular.module("myApp", []);
122         app.controller("myCtrl", function ($scope) {
123             $scope.names = [
124                 { "name": "姓名1", "age": 30 },
125                 { "name": "姓名2", "age": 29 },
126                 { "name": "姓名3", "age": 28 },
127                 { "name": "姓名4", "age": 26 },
128                 { "name": "姓名5", "age": 26 },
129                 { "name": "姓名6", "age": 15 },
130                 { "name": "姓名7", "age": 16 },
131                 { "name": "姓名8", "age": 17 },
132             ];
133             $scope.sortFlag = "age";
134             $scope.sortText = "降序";
135             $scope.sort = function () {
136                 $scope.sortFlag = $scope.sortFlag === "age" ? "-age" : "age";
137                 $scope.sortText = $scope.sortFlag === "age" ? "降序" : "升序";
138             } 
139         });
140 　　　　//自定义sayHello过滤器
141         app.filter("sayHello", function () {
142             return function (text) {
143                 return text + " say: Hello World";
144             }
145         })
146     </script>
147 </body>
148 </html>