本文也同步发表在我的公众号“我的天空”

重复HTML元素

在前端的页面编写中，我们会经常遇到重复HTML元素，譬如绘制表格、菜单等，如以下代码显示一个简单的li列表：

<body>
    <ul id="ul_cities">
    </ul>
</body>

<script>
      window.onload=function(){
          var cities=['上海','成都','北京','广州'];
          var ul=document.getElementById("ul_cities");
          var li;
          for(var i=0;i<cities.length;i++){
              li=document.createElement("li");
              li.innerHTML=cities[i];
              ul.appendChild(li);
          }
      }
</script>

示例代码AngularJS_03.html

在AngularJS中， 可以通过ng-repeat指令来方便的实现HTML元素的重复，如以下代码示例：

<body ng-app ng-init="cities=['上海','成都','北京','广州']">
    <ul>
        <li ng-repeat="city in cities">{{city}}</li>
    </ul>
</body>

示例代码AngularJS_04.html

以上代码中，我们首先用ng-app指令声明的AngularJS的应用范围，使用ng-init初始化了cities数组数据，随后在li标签内加入了ng-repeat命令，表明其是一组重复的HTML元素，其重复的数据源是cities，最后在li里写入表达式{{city}}，表明其显示变量city。

比较两个示例，可以发现使用ng-repeat命令后，代码变得更加简洁，我们也初步领略了AngulerJS带来的好处。接下来的代码演示如何在表格中显示一组对象数组：

<body ng-app ng-init="persons=[
    {name:'张三',sex:'男',age:23},
    {name:'李四',sex:'男',age:18},
    {name:'王红',sex:'女',age:24}]">

<table>
        <tr ng-repeat="person in persons">
            <td>{{person.name}}</td>
             <td>{{person.sex}}</td>
            <td>{{person.age}}</td>
       </tr>
    </table>
</body>

示例代码AngularJS_05.html

数据绑定

通过ng-model指令可以将值绑定在指定元素上，典型的应用是不同元素间的数据同步。譬如我们希望在一个文本框内输入的内容同步的在其他元素上显示，则可以使用数据绑定，如下所示：

<body ng-app>
    <input type="text" ng-model="a">
    <p>你输入的是:{{a}}</p>
</body>

示例代码AngularJS_06.html

在以上这段代码中，我们在一个input上使用了数据绑定指令ng-model，其绑定的目标是a变量，而在p标签中，包含了一个表达式，显示a的值。这样当input文本框里的内容发生改变时，a的值也发生同步变化，而这种变化又反应在p标签的表达式中，这样便完成了文本框内容与p标签内容的绑定。

AngulerJS中的绑定是双向的，如以下代码，无论哪一个文本框的内容发生变化，另一个也相应同步修改：

<body ng-app>
    <input type="text" ng-model="a">
    <input type="text" ng-model="a">
    <p>你输入的是:{{a}}</p>
</body>

示例代码AngularJS_07.html

该系列的示例代码

https://github.com/panyongwow/angularJS

AngularJS（三）：重复HTML元素、数据绑定的更多相关文章

  1. AngularJS基础02 神奇的数据绑定（Binding）

    作者:arccosxy  转载请注明出处:http://www.cnblogs.com/arccosxy/ 上一节,我们在JS中声明一个scope变量然后在HTML直接访问它,这非常的酷.但是Angu ...

  2. hihoCoder 后缀自动机三·重复旋律6

    后缀自动机三·重复旋律6 时间限制:15000ms 单点时限:3000ms 内存限制:512MB 描述 小Hi平时的一大兴趣爱好就是演奏钢琴.我们知道一个音乐旋律被表示为一段数构成的数列. 现在小Hi ...

  3. [转]java去除List中重复的元素

    java去除List中重复的元素 如果用Set ,倘若list里边的元素不是基本数据类型而是对象, 那么请覆写Object的boolean   equals(Object   obj)   和int  ...

  4. js删除数组中重复的元素

    1.方法一 将数组逐个搬到另一个数组中,当遇到重复元素时,不移动,若元素不重复则移动到新数组中 function unique(arr){ var len = arr.length; var resu ...

  5. Java-ArrayList使用技巧---从第一个List中去除所有第二个List中与之重复的元素

    需求:从 mAllList 中去除所有 mSubList 中与之重复的元素 测试数据:mAllList 中包含100000个无序无重复字符串,mSubList 中包含50000个无序无重复字符串 方法 ...

  6. C#实现如何判断一个数组中是否有重复的元素 返回一个数组升序排列后的位置信息--C#程序举例 求生欲很强的数据库 别跟我谈EF抵抗并发，敢问你到底会不会用EntityFramework

    C#实现如何判断一个数组中是否有重复的元素   如何判断一个数组中是否有重复的元素 实现判断数组中是否包含有重复的元素方法 这里用C#代码给出实例 方法一:可以新建一个hashtable利用hasht ...

  7. 如何判断/检查一个集合（List<string>)中是否有重复的元素

    问题描述 在.NET/C#应用程序编程开发中,如何判断一个字符串集合List<string>中是否有重复的元素? 假如有如下的List<string>集合: var lstNa ...

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

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

  9. hiho一下122周 后缀数组三·重复旋律

    后缀数组三·重复旋律3 时间限制:5000ms 单点时限:1000ms 内存限制:256MB 描述 小Hi平时的一大兴趣爱好就是演奏钢琴.我们知道一个音乐旋律被表示为长度为 N 的数构成的数列.小Hi ...

随机推荐

  1. Jasper-Api：接口测试

    ylbtech-Jasper-Api:接口测试 1. EditTerminal返回顶部 1. /// <remarks/> [System.Web.Services.Protocols.S ...

  2. [poj3071]football概率dp

    题意:n支队伍两两进行比赛,求最有可能获得冠军的队伍. 解题关键:概率dp,转移方程:$dp[i][j] +  = dp[i][j]*dp[i][k]*p[j][k]$表示第$i$回合$j$获胜的概率 ...

  3. metasploit msfconsole 命令

    metasploit msfconsole 命令 msf > help db_autopwn Commands =================== Command Description - ...

  4. 使用MeshLab的技巧总结（自己原创总结）

    1.放大点的显示,Alt+wheel,即按住Alt键后使用鼠标滑轮改变点的显示大小.

  5. WSAStartup（）函数的使用

    int WSAStartup( __in WORD wVersionRequested, __out LPWSADATA lpWSAData ); WSAStartup 格  式: int PASCA ...

  6. GPLT天梯赛 L2-022. 重排链表

    L2-022. 重排链表 时间限制 500 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 陈越 给定一个单链表 L1→L2→...→Ln-1→Ln,请 ...

  7. HTML5学习笔记（五）存储

    HTML5 web 存储,一个比cookie更好的本地存储方式.数据以 键/值 对存在, web网页的数据只允许该网页访问使用.加的安全与快速.可以存储大量的数据,而不影响网站的性能. 客户端存储数据 ...

  8. 3dmax沿立方体边扩展出面

    这个做法有问题,接缝问题处理起来很麻烦,立方体与平面的拼接基本就做不到 做建筑时,一般先做墙,然后通过墙扩展出地表,这么做可以保证墙和地表是一体的,避免产生缝隙 1 新建2个Cube 2 转换为可编辑 ...

  9. 利用外部协议让chrome启动外部应用程序

    http://bbs.kafan.cn/thread-1254526-1-1.html 原理:很简单,标题写的很明确了,不懂的google去. 步骤:举个例子,我要启动D:\Programe file ...

  10. Codevs 4357 不等数列

    不等数列 [题目描述] 将1到n任意排列,然后在排列的每两个数之间根据他们的大小关系插入“>”和“<”.问在所有排列中,有多少个排列恰好有k个“<”.答案对2012取模. [输入格式 ...