angularjs 迭代器可以使用管道字符（|）添加到表达式和指令中。

有以下五种转换数据的迭代器：

（1）currency-格式化数字为货币格式。

（2）filter-从数组中选择一个一个子集。

（3）lowercase格式化字符串为小写。

（4）orderBy-根据某个表达式排列数组。

（5）uppercase-格式化字符串为大写。

  1. 添加到表达式中:

      <div ng-app="myApp" ng-controller="personCtrl">

 <p>姓名为 {{ lastName | uppercase }}</p>

 </div>

    添加到指令中:

      <div ng-app="myApp" ng-controller="namesCtrl">

 <ul>
    
   <li ng-repeat="x in names | orderBy:'country'">
    
     {{ x.name + ', ' + x.country }}
    
   </li>
    
 </ul>

 <div>
  2. 通过实例来理解：

使用起来很方便，这里主要探索一下迭代器的一般原理，到底它是怎么迭代的。这样可以实现更多功能的实用的迭代器。

（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;

	};

}]);

查看实例演示结果：http://dreammaker-8-16-qboooogle.c9users.io:8080/

angularjs 迭代器的更多相关文章

  1. AngularJs学习总结－了解基本特性（－）

    现在的前端项目中基本上都会用到angularjs框架,之前并不了解这个框架,也是因为最近接手的项目,所以打算好好的学习下它.之前都是搞pc端,现在接手的是移动端的项目,移动端UI框架用的是ionic+ ...

  2. Angular系列---- AngularJS入门教程03：AngularJS 模板（转载）

    是时候给这些网页来点动态特性了——用AngularJS!我们这里为后面要加入的控制器添加了一个测试. 一个应用的代码架构有很多种.对于AngularJS应用,我们鼓励使用模型-视图-控制器(MVC)模 ...

  3. Angular系列----AngularJS入门教程01：AngularJS模板 （转载）

    是时候给这些网页来点动态特性了——用AngularJS!我们这里为后面要加入的控制器添加了一个测试. 一个应用的代码架构有很多种.对于AngularJS应用,我们鼓励使用模型-视图-控制器(MVC)模 ...

  4. AngularJS是为了克服HTML在构建应用上的不足而设计的

    AngularJS中文网:http://www.apjs.net/ 简介   AngularJS是为了克服HTML在构建应用上的不足而设计的.HTML是一门很好的为静态文本展示设计的声明式语言,但要构 ...

  5. AngularJS 模板

    一个应用的代码架构有很多种.对于AngularJS应用,我们鼓励使用模型-视图-控制器(MVC)模式解耦代码和分离关注点.考虑到这一点,我们用AngularJS来为我们的应用添加一些模型.视图和控制器 ...

  6. 【转载】图灵AngularJS入门教程

    摘自图灵的AngularJS入门教程:http://www.ituring.com.cn/article/13471 感觉非常不错,所以推荐到首页一下! (一)Hello World! 开始学习Ang ...

  7. AngularJS入门讲解1：angular基本概念

    AngularJS应用程序主要有三个组成部分: 模板(Templates) 模板是您用HTML和CSS编写的文件,展现应用的视图. 您可给HTML添加新的元素.属性标记,作为AngularJS编译器的 ...

  8. [转载]AngularJS入门教程02：AngularJS模板

    是时候给这些网页来点动态特性了——用AngularJS!我们这里为后面要加入的控制器添加了一个测试. 一个应用的代码架构有很多种.对于AngularJS应用,我们鼓励使用模型-视图-控制器(MVC)模 ...

  9. 混合式框架-AngularJS

    简单介绍   AngularJS是为了克服HTML在构建应用上的不足而设计的.HTML是一门非常好的为静态文本展示设计的声明式语言,但要构建WEB应用的话它就显得乏力了.所以我做了一些工作(你也能够认 ...

随机推荐

  1. 我的android学习经历40

    为listview设置背景,并且不随拖动改变 <ListView android:id="@+id/list_view" android:layout_width=" ...

  2. 20 个值得一试的JavaScript 框架

      投递人 itwriter 发布于 2011-09-26 17:46 评论(3) 有1956人阅读 原文链接 [收藏] « » 本文介绍 20 个值得一试的 JavaScript 框架,如果你认为答 ...

  3. javascript实现json页面分页

    下午有个朋友问json 数据怎么分页 就捣鼓了一个东东出来 下面直接代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitio ...

  4. eclipse https git

    open preferences via application menu Window => Preferences (or on OSX Eclipse => Settings). N ...

  5. HDU 5775 Bubble Sort（冒泡排序）

    p.MsoNormal { margin: 0pt; margin-bottom: .0001pt; text-align: justify; font-family: Calibri; font-s ...

  6. c#入门笔记（2）控件

    1.控件是可以从工具栏直接拖动到窗体,具有确定功能的函数.大部分控件属于control类的派生类.通用属性name(名称),location(具体的位置),top,left(位置) 2.form窗体类 ...

  7. 转：[置顶] 从头到尾彻底理解KMP（2014年8月22日版）

    [置顶] 从头到尾彻底理解KMP(2014年8月22日版)

  8. JS历史

    JavaScript伴随着互联网的发展一起发展.互联网周边技术的快速发展,刺激和推动了JavaScript语言的发展. 2006年,jQuery函数库诞生,作者为John Resig.jQuery为操 ...

  9. js+css3文字模糊代码

    在写文字模糊的时候要理清自己的思路,根据以下的步骤来: 对你要模糊的文字进行布局 <body style="background:#ccc;"> <ul clas ...

  10. Android开发--Layout元素

    1.TF类型 android:layout_alignParentStart="true/flase":贴紧父元素的左边缘 android:layout_alignParentEn ...