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. jquery简单动画

    自定义滑入滑出动画 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Defaul ...

  2. 任意阶幻方（魔方矩阵）C语言实现

    魔方又称幻方.纵横图.九宫图,最早记录于我国古代的洛书.据说夏禹治水时,河南洛阳附近的大河里浮出了一只乌龟,背上有一个很奇怪的图形,古人认为是一种祥瑞,预示着洪水将被夏禹王彻底制服.后人称之为&quo ...

  3. C#类遍历

    foreach语句的基本用法大家都应该知道,就是对对象进行遍历,取出相应的属性名称或属性值.Foreach(for)用法在js中使用很简单,基本如下: var objA={name:'mayday', ...

  4. KO Demo

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  5. Flex 文本控件实现自定义复制粘贴

    由于添加了自定义右键菜单,导致Textinput控件默认的右键复制粘贴功能被屏蔽了.最后通过JS脚本实现这个功能,参考代码如下 <?xml version="1.0" enc ...

  6. HQL 参数绑定、唯一结果、分页、投影总结（上）

    我们先总结一下HQL语句常用语法: from子句:; select子句:用于选取对象和属性; where子句:用于表达查询语句的限制条件; 使用表达式:一般用在where子句中; order by子句 ...

  7. Trick

    1. var b = a.slice(beginIndex,endIndex); [].slice.call( [] ) Array.prototype.slice.call([]) will cop ...

  8. mac 激活Ultra Edit16

    一.文本编辑器UltraEdit 参照Ultra Edit16.10 Mac 破解下载,或者官方下载 Ultra Edit16即可 printf of=/Applications/UltraEdit. ...

  9. Less入门到上手——前端开发利器<二>深入了解

    接着昨天的继续... ... 4.嵌套: HTML部分 <table> <tr> <th colspan="3">测试列表标题</th&g ...

  10. ~是什么意思 在C语言中,~0代表什么

    是c语言中的位运算符:取反.0在内存中的存储方式是所有位为0,0000000000000000那么按位取反后位16个1(如果整形在你的机器上站16位),那么表示的数为-1.