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. 3D数学基础学习之向量一

    向量-数学定义 对数学家而言,向量就是一个数字列表,对程序员而言则是另一种相似的概念,数组. 向量-几何定义 a.向量的大小就是向量的长度(模),向量的长度非负 b.向量的方向描述了空间中向量的指向. ...

  2. JAVA线程锁-读写锁应用，简单的缓存系统

    在JAVA1.5版本以后,JAVA API中提供了ReadWriteLock,此类是一个接口,在它的实现类中ReentrantReadWriteLock中有这样一段代码 class CachedDat ...

  3. Android监听应用程序安装和卸载

    Android监听应用程序安装和卸载 第一. 新建监听类:BootReceiver继承BroadcastReceiver package com.rongfzh.yc; import android. ...

  4. set集合，是一个无序且不重复的元素集合

    set集合,是一个无序且不重复的元素集合 class set(object):     """     set() -> new empty set object ...

  5. SQL触发器实例

    SQL触发器实例讲解(本文是来自百度文库) 备注:本人建了一个站特价汇,我想记录每个商品的点击量,然后按照点击量来牌名商品,想要提高效率,所以必须得用触发器,下面是本人在百度文库中的找到的学习资料,分 ...

  6. C#连接上sql server 2008 第一次实践

    花了一早上的时间,终于连接上了我的本地数据库,我想应该记一下! 先贴个代码: using System; using System.Collections.Generic; using System. ...

  7. 单据状态BE构建

    这节主要罗列出单据状态BE构建步骤1.创建单据状态BE实体项目,修改命名空间 2.如下图所示,分别设置实体枚举状态值 3.修改单据基本属性 构造后,至此单据状态BE构建完毕

  8. 原生cookie

    出于浏览器的安全性限制,从WEB应用程序中访问用户本地文件系统是有许多限制的.但是WEB站点的开发人员可以使用cookie,将少量信息保存在用户本地硬盘的指定空间中. document对象的cooki ...

  9. 再说最后一次！关于不再更新SkySRS的理由！

    再说最后一次!关于不再更新SkySRS的理由! https://www.itiankong.net/thread-195937-1-1.html Skyfree 发表于 2012-5-1 14:53: ...

  10. cellular neural networks（CNN）原理以及应用

    一.CNN的原理 1.CNN的思想: (1)借鉴了hopfield神经网络和CA a.hopfield的非线性动力学(主要是用于优化问题,比如旅行商问题等NP问题),Hopfield的能量函数的概念, ...