angularjs 迭代器可以使用管道字符（|）添加到表达式和指令中。
有以下五种转换数据的迭代器：
（1）currency-格式化数字为货币格式。
（2）filter-从数组中选择一个一个子集。
（3）lowercase格式化字符串为小写。
（4）orderBy-根据某个表达式排列数组。
（5）uppercase-格式化字符串为大写。
- 添加到表达式中:
添加到指令中:
1 <div ng-app="myApp" ng-controller="personCtrl"> 2 3 <p>姓名为 {{ lastName | uppercase }}</p> 4 5 </div>
1 <div ng-app="myApp" ng-controller="namesCtrl"> 2 3 <ul> 4 <li ng-repeat="x in names | orderBy:'country'"> 5 {{ x.name + ', ' + x.country }} 6 </li> 7 </ul> 8 9 <div>
- 通过实例来理解：
使用起来很方便，这里主要探索一下迭代器的一般原理，到底它是怎么迭代的。这样可以实现更多功能的实用的迭代器。
（1）：实现一个字符拼接
（2）：实现一个求目标字符串的长度。
<!DOCTYPE html> <html lang="zh-CN" ng-app="webapp"> <head> <meta charset="utf-8"> <title>Demo</title> <link rel="stylesheet" href="../bootstrap.min.css"/> <style> body {font-size:20px;} .ng-scope { margin: 10px; padding:10px; border:1px solid #000; } span {margin:0 0 0 40px;color:red;} li {float:left;margin:0 100px 0 0 ;} ul {background:lightblue;} </style> </head> <body> <div ng-controller="FilterTestCtrl"> <div> <h1>Filter</h1> <ul class="clearfix"> <li> <h3>迭代器基本操作</h3> <div> 100|currency<span>{{100|currency:"RMB "}}</span><br /> 1404292235912|date:"yyyy-MM-dd HH:mm:ss"<span>{{1404292235912|date:"yyyy-MM-dd HH:mm:ss"}}</span><br /> ["aaa","bbb","ccc"]|filter:'c'<span>{{["aaa","bbb","ccc"]|filter:'c'}}</span><br /> [{name:"aaa",age:30},{name:"ccc",age:40}]|filter:'c' <span>{{[{name:"aaa",age:30},{name:"ccc",age:40}]|filter:'c'}}</span><br /> "abcdefg"|limitTo:3<span>{{"abcdefg"|limitTo:3}}</span><br /> ["aa","bb","cc","dd"]|limitTo:2<span>{{["aa","bb","cc","dd"]|limitTo:2}}</span><br /> {a:1,b:2}|json<span>{{{a:1,b:2}|json}}</span><br /> "ABCDEFG"|lowercase<span>{{"ABCDEFG"|lowercase}}</span><br /> "abcdefg"|uppercase<span>{{"abcdefg"|uppercase}}</span><br /> 16.7563|number:2 <span>{{16.7563|number:2}}</span><br /> 167563|number <span>{{167563|number}}</span><br /> [{"age": 20},{"age": 12}] | orderBy:'age'<span>{{ [{"age": 20},{"age": 12}] | orderBy:'age'}}</span><br /> [{"age": 20},{"age": 12}] | orderBy:'age':true <span>{{ [{"age": 20},{"age": 12}] | orderBy:'age':true }}</span><br /> </div> </li> <li> <h3>实现更多实用的filter</h3> <div> ["a","b","c"]|concat:"," <span>{{["a","b","c"]|concat:","}}</span><br /> "abcdefg"|strlen<span>{{"abcdefg"|strlen}}</span><br /> ["a","b","c"]|concat:","|strlen<span>{{["a","b","c"]|concat:","|strlen}}</span><br /> </div> </li> </ul> </div> </div> <script src="../angular.min.js"></script> <script src="../demo.js"></script> </body> </html>
filter两个参数，第一个参数为绑定的迭代器名称，第二个参数表示对操作对象的处理。
angular.module("webapp",[]);
angular.module("webapp")
.filter("concat" , [function() {
return function(arr , concat_char) {
if(!angular.isArray(arr)) {
return '';
}
concat_char = concat_char || ' ';
return arr.join(concat_char);//
};
}]).filter("strlen" , [function() {
return function(str) {
if(!angular.isString(str)) {
return '';
}
return str.length;
};
}]);
