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. HTML学习开篇

    最近开的博客,一切都是从零开始,昨天刚写了java的开篇,今天写一写HTML开篇. 很多初学者都不太看重前端的学习,甚至鄙视前端,我刚开始时就这样.其实,要想成为一个真正的程序员,前端和后端都必须了解 ...

  2. python2 到 python3 转换工具 2to3

    windows系统下的使用方法: (1)将python安装包下的Tools/Scripts下面的2to3.py拷贝到需要转换文件目录中. (2)dos切换到需要转换的文件目录下,运行命令2to3.py ...

  3. HTTP协议的头信息详解

    转载地址:http://blog.csdn.net/guoguo1980/article/details/2649658 HTTP(HyperTextTransferProtocol)是超文本传输协议 ...

  4. nodejs搭建http-server

      很多时候我们都需要搭建一个简单的服务器,部署在IIS,阿帕奇,或者用nodejs,网上很多关于nodejs搭建server的文章,但都是要创建server.js,很麻烦, 在这里我分享一个创建ht ...

  5. python collections defaultdict

    class_counts  = defaultdict(int) 一.关于defaultdict 在Python里面有一个模块collections,解释是数据类型容器模块.这里面有一个collect ...

  6. java练习题（字符串类）：显示4位验证码、输出年月日、从XML中抓取信息

    1.显示4位验证码 注:大小写字母.数字混合 public static void main(String[] args) { String s="abcdefghijklmnopqrstu ...

  7. Nginx 1.10.2 php 7 环境安装

    1.安装编译工具和库文件,红色部分提示在centos镜像站点上查不到包,用yum安装的时候要认真看那些包没有找到,用yum的时候尽量不要使用-y选项 yum install gcc automake ...

  8. vue学习笔记之v-if

    if顾名思义就是判断,v-if也是判断,举例如下 <p v-if="hello">Hello!</p> 这里 v-if 指令将根据表达式 hello 值的真 ...

  9. java 多线程—— 线程让步

    java 多线程 目录: Java 多线程——基础知识 Java 多线程 —— synchronized关键字 java 多线程——一个定时调度的例子 java 多线程——quartz 定时调度的例子 ...

  10. app——分享wap站，数据处理页面展示

    无意中接到了一个小的工作任务:配合手机app端的分享功能做一个wap站,简言之:将手机app端分享的文章id传过来,利用此id再进行一系列的操作,由于文章分为纯文本,图文以及图集的三种类型的文章,因此 ...