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>