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. oracle组查询

    概念: 所谓组查询即将数据按照某列或者某些列相同的值进行分组,然后对该组的数据进行组函数运用,针对每一组返回一个结果. note: 1.组函数可以出现的位置: select子句和having 子句 2 ...

  2. phpstorm相关设置

    1, phpstorm安装好后在编辑页随便点哪里都能把光标移过去,类似于word的“即点即输”.仔细找了下,终于找出来怎么关闭了: 这一功能在phpstorm中不知道叫啥名,去掉方法是 打开File- ...

  3. 深入浅出设计模式——备忘录模式（Memento Pattern）

    模式动机 为了使软件的使用更加人性化,对于误操作,我们需要提供一种类似“后悔药”的机制,让软件系统可以回到误操作前的状态,因此需要保存用户每一次操作时系统的状态,一旦出现误操作,可以把存储的历史状态取 ...

  4. python成长之路【第七篇】：面向对象

    概述 面向过程:根据业务逻辑从上到下写垒代码 函数式:将某功能代码封装到函数中,日后便无需重复编写,仅调用函数即可 面向对象:对函数进行分类和封装,让开发“更快更好更强...” 面向对象三大特性 面向 ...

  5. 【Todo】网络编程学习-面向工资编程

    https://zhuanlan.zhihu.com/p/20204159 这个系列真的非常好,好好领会学习一下

  6. Delphi 使用之连接数据库

    DELPHI 中的数据库开发有很多种类的,可以连接Access数据库.MS SQL Server 数据库.Oracle 数据库.MySQL数据库等等,一般连接有两种方式:BDE和ADO两种方式, 都是 ...

  7. Android 四大组件之一(Activity)

    Activty的生命周期的也就是它所在进程的生命周期. 一个Activity的启动顺序: onCreate()——>onStart()——>onResume() 当另一个Activity启 ...

  8. ubuntu如何卸载apt-get install安装的软件

    1.sudo apt-get remove xxxxx  sudo apt-get autoremove2.对于用命令sudo aptitude install xxx安装的软件可以用sudo apt ...

  9. &与&&的区别

    &是“逻辑与”(“按位与”“位运算符”),一定要判断完所有的条件才能确定到底返回true还是false. &&是“短路与”(“逻辑运算符”),当从左至右判断时,一旦出现有一个条 ...

  10. APIO2015 酱油记

    Day 0 昨天CTSC才比完,当然是要浪啦! 于是浪了一天...午饭都没吃... 晚饭...貌似也没吃... 晚上的时候觉得这样子浪不太好,还是要认真一下,打开bzoj,弃疗了...还是浪吧... ...