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

重复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. 洛谷 P5061 秘密任务 —— 二分图

    题目:https://www.luogu.org/problemnew/show/P5061 首先,“配合默契”就是连边的意思: 但发现答案不好统计,因为有连边的两个点可以分在一组,也可以不分在一组: ...

  2. poj2127——LCIS

    题目:http://poj.org/problem?id=2127 LCIS,注意存储路径的方法. 代码如下: #include<iostream> #include<cstdio& ...

  3. The current .NET SDK does not support targeting .NET Core 2.2

    The current .NET SDK does not support targeting .NET Core 2.2 1. 奇怪的错误 最近遇到了一件奇怪的事, The current .NET ...

  4. orcale用户名的创建及权限设置

    oracle数据库的权限系统分为系统权限与对象权限.系统权限( database system privilege )可以让用户执行特定的命令集.例如,create table权限允许用户创建表,gr ...

  5. ng2父子模块通信@ViewChild和@Inject

    一.@ViewChild 父组件中使用@ViewChild拿到子组件的变量和方法(父组件可调用子组件的方法和变量) parent.component.ts: import { Component, O ...

  6. Angular 2 ViewChild & ViewChildren

    一.ViewChild ViewChild 是属性装饰器,用来从模板视图中获取匹配的元素.视图查询在 ngAfterViewInit 钩子函数调用前完成,因此在 ngAfterViewInit 钩子函 ...

  7. go实现冒泡排序和快速排序

    项目结构 冒泡排序算法,源文件bubblesort.go package bubblesort // 冒泡排序 func BubbleSort(values []int) { for i := 0; ...

  8. Linux下的eclipse的安装

    其实在linux里配好java环境后,就已经好了. 从官网下一个eclipse,解压后,就可以直接执行eclipse了,实在是不知道什么是安装. 其实在配置java时,也是一样. 可见在linux下, ...

  9. HDU - 6185 Covering（暴搜+递推+矩阵快速幂）

    Covering Bob's school has a big playground, boys and girls always play games here after school. To p ...

  10. 组合外键(FOREIGN KEY)

    一张表,它的外键即是参考另一张表的主键,但这些关联键是组合键,由2列或多列组成. 你可以先看看这篇<多列组合为主键(PRIMARY KEY)>https://www.cnblogs.com ...