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

重复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. 洛谷 P3804 [模板] 后缀自动机

    题目:https://www.luogu.org/problemnew/show/P3804 模仿了一篇题解,感觉很好写啊. 代码如下: #include<cstdio> #include ...

  2. 非常好的LINUX学习者博客

    http://blog.csdn.net/qq_21794823/article/category/6496200

  3. msfvenom 摄像头

    4.13 莫名其妙的心情不好 又回到了那个不想打游戏不想聊天不想说话的日子. 不用想.vm——>kali 很早以前看过用msfvenom生成木马的文章.然后……然后我的浏览器就崩溃了.Firef ...

  4. java——构造方法重载

    class Person { private String name ; private int age ; public Person() { } public Person(String n,in ...

  5. Oracle数据去重

    一.完全重复数据去重方法    具体思路是,首先创建一个临时表,然后将DISTINCT之后的表数据插入到这个临时表中;然后清空原表数据;再讲临时表中的数据插入到原表中;最后删除临时表. 对于表中完全重 ...

  6. 《SpringBoot揭秘 快速构建微服务体系》读后感（一）

    SpringIOC IOC有两种方式:一种是DI,另一种是DL,即Dependency Lookup(依赖查找).前者是当前软件实体被动接受其依赖的其他组件被IoC容器注入,而后者则是当前软件实体主动 ...

  7. day1 java基础回顾-IO流

    IO流的分类 注:这几个类都是抽象类. IO解决问题: 解决设备与设备之间 的数据传输问题. 比如: 硬盘--->内存 内存----->硬盘 字节流: 输入字节流:---------| I ...

  8. Javascript中的"\r\n"

    我们知道 \r 代表的是 回车符(ACSII: 13 或0x0d), 也就是"硬回车" \n 代表的是 换行符(ACSII: 10 或 0x0a), 也就是 "软回车&q ...

  9. HDU - 1869 六度分离 Floyd多源最短路

    六度分离 1967年,美国著名的社会学家斯坦利·米尔格兰姆提出了一个名为“小世界现象(small world phenomenon)”的著名假说,大意是说,任何2个素不相识的人中间最多只隔着6个人,即 ...

  10. Zookeeper发布订阅之SpringBoot+Mybatis多数据源

    1.前言 数据发布/订阅系统,即所谓的配置中心,顾名思义就是发布者将数据发布到Zookeeper的一个或一系列节点上,供订阅者进行数据订阅,进而达到动态获取数据的目的,实现配置信息的集中管理和数据的动 ...