AngularJS（三）：重复HTML元素、数据绑定
本文也同步发表在我的公众号“我的天空”
重复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
