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

重复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. 洛谷 P4721 [模板]分治FFT —— 分治FFT / 多项式求逆

    题目:https://www.luogu.org/problemnew/show/P4721 分治做法,考虑左边对右边的贡献即可: 注意最大用到的 a 的项也不过是 a[r-l] ,所以 NTT 可以 ...

  2. Asp.Net 无法获取IIS拾取目录的解决办法[译]

    Asp.Net 无法获取IIS拾取目录的解决办法 作者:Jason Doucette  [MCP] 翻译:彭远志 原文地址:Fixing the cannot get IIS pickup direc ...

  3. WPF ValidationRule 触发ErrorTemplate 的注意事项

    ValidationRule 验证时, 当验证失败后,再次验证成功, errorTemplate 还是触发, 不会被清掉. 因此需要主动调用 Validation.ClearInvalid(dtpTe ...

  4. 将eclipse java程序打包成jar的总结（包括工程中没有引用外部jar包和有引用外部jar包两种情况）

    一.当eclispe java工程中没有引用外部jar包时: 选中工程---->右键,Export...--->Java--->JAR file--->next-->填写 ...

  5. C#ＡＰＩ接口调试工具

    自从去年软件界网站开发推崇前后端分离,我们公司也在进行转行行,从原先的前端架构,后端架构,数据库搭建一肩挑的模式也逐渐转型为前后端分离,大量招收前端开发人员,原来的人员也转型为专职的后端开发,这样的变 ...

  6. Python模拟登录代码

    注:访问http://127.0.0.1:8080/user/6,总是会要求必须有登录权限,也就是,若未登录,访问该页面,会跳转到登陆页面. 全自动模拟登录 半自动模拟登录:

  7. JAVA正则表达式之 Pattern介绍

    1.简介: java.util.regex是一个用正则表达式所订制的模式来对字符串进行匹配工作的类库包. 它包括两个类:Pattern和Matcher. Pattern 一个Pattern是一个正则表 ...

  8. PHP判断用户是手机端？还是浏览器端访问？

    function isMobile(){ $useragent=isset($_SERVER['HTTP_USER_AGENT']) ? $_SERVER['HTTP_USER_AGENT'] : ' ...

  9. 2010辽宁省赛G（佩尔方程）

    #include <iostream> #include <stdio.h> #include <string.h> #include <algorithm& ...

  10. html页面渲染过程

    1.解析html文件,创建DOM树 自上而下解析,遇到任何样式(link.style)和脚本(script)都会阻塞 1)css加载不会阻塞html文件的解析,但会阻塞dom的渲染 2)css加载会阻 ...