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

重复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. Python 同ip网站查询（制作网站接口）

    老师专门打电话回来说不让玩电脑~~   呵呵.  LOL把被人坑死了. 五排果然不适合我. 去翻了下曾经的Python项目. 在爬虫文件夹下面找到了这个. 我也就厚脸皮的什么都不改就放上来了: #co ...

  2. Javascript Tip(!!)

    var a:var b=!!a; a默认是undefined.!a是true,!!a则是false,所以b的值是false,而不再是undefined,也非其它值,主要是为后续判断提供便利. !!一般 ...

  3. HashMap的clear方法

    我们都知道HashMap的clear()方法会清楚map的映射关系,至于怎么实现的呢? 下面先看一下clear()方法的源码 public void clear() { Node<K,V> ...

  4. unique（）函数

    unique()是c++里面的一个去重函数,包含在<iostream>中. 该函数将重复的元素移至容器的末尾,返回的为前面的无重复项的尾地址. 由于返回的是地址,所以经常需要转换为数值使用 ...

  5. 转：isualvm远程监控Tomcat

    一.Java VisualVM 概述 对于使用命令行远程监控jvm 太麻烦 . 在jdk1.6 中 Oracle 提供了一个新的可视化的. JVM 监控工具 Java VisualVM .jvisua ...

  6. day5 面向对象

    面向对象的特征 封装(encapsulation) 继承(inheritance) 多态(polymorphism) 开发的过程:其实就是不断的创建对象,使用对象,指挥对象做事情. 设计的过程:其实就 ...

  7. ES5.X相关API和技巧汇总

    https://blog.csdn.net/laoyang360/article/details/77412668

  8. ACM-ICPC2018北京网络赛 Tomb Raider（暴力）

    题目2 : Tomb Raider 时间限制:1000ms 单点时限:1000ms 内存限制:256MB 描述 Lara Croft, the fiercely independent daughte ...

  9. 机器学习中的L1、L2正则化

    目录 1. 什么是正则化?正则化有什么作用? 1.1 什么是正则化? 1.2 正则化有什么作用? 2. L1,L2正则化? 2.1 L1.L2范数 2.2 监督学习中的L1.L2正则化 3. L1.L ...

  10. bzoj 2632: [neerc2011]Gcd guessing game【贪心】

    这个告诉gcd的操作实际上就是告诉一个因数是否选,最坏情况是1,判断掉所有因数才能选 然后肯定是用猜不重复质数积比较划算,问题就变成若干个质数,分成数量尽量小每组乘积<=n的若干组 从大质数开始 ...