本文也同步发表在我的公众号“我的天空”
重复HTML元素
在前端的页面编写中，我们会经常遇到重复HTML元素，譬如绘制表格、菜单等，如以下代码显示一个简单的li列表：
<body> <ul id="ul_cities"> </ul></body>
<script> window.οnlοad=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