AngularJS（三）：重复HTML元素、数据绑定
本文也同步發(fā)表在我的公眾號“我的天空”
?
重復(fù)HTML元素
?
在前端的頁面編寫中，我們會經(jīng)常遇到重復(fù)HTML元素，譬如繪制表格、菜單等，如以下代碼顯示一個(gè)簡單的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指令來方便的實(shí)現(xiàn)HTML元素的重復(fù)，如以下代碼示例：
?
<body ng-app ng-init="cities=['上海','成都','北京','廣州']">
??? <ul>
?? ???? <li ng-repeat="city in cities">{{city}}</li>
?? ?</ul>
</body>
示例代碼AngularJS_04.html
?
以上代碼中，我們首先用ng-app指令聲明的AngularJS的應(yīng)用范圍，使用ng-init初始化了cities數(shù)組數(shù)據(jù)，隨后在li標(biāo)簽內(nèi)加入了ng-repeat命令，表明其是一組重復(fù)的HTML元素，其重復(fù)的數(shù)據(jù)源是cities，最后在li里寫入表達(dá)式{{city}}，表明其顯示變量city。
?
比較兩個(gè)示例，可以發(fā)現(xiàn)使用ng-repeat命令后，代碼變得更加簡潔，我們也初步領(lǐng)略了AngulerJS帶來的好處。接下來的代碼演示如何在表格中顯示一組對象數(shù)組：
?
<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
?
數(shù)據(jù)綁定
?
通過ng-model指令可以將值綁定在指定元素上，典型的應(yīng)用是不同元素間的數(shù)據(jù)同步。譬如我們希望在一個(gè)文本框內(nèi)輸入的內(nèi)容同步的在其他元素上顯示，則可以使用數(shù)據(jù)綁定，如下所示：
?
<body ng-app>
??? <input type="text" ng-model="a">
??? <p>你輸入的是:{{a}}</p>
</body>
示例代碼AngularJS_06.html
?
在以上這段代碼中，我們在一個(gè)input上使用了數(shù)據(jù)綁定指令ng-model，其綁定的目標(biāo)是a變量，而在p標(biāo)簽中，包含了一個(gè)表達(dá)式，顯示a的值。這樣當(dāng)input文本框里的內(nèi)容發(fā)生改變時(shí)，a的值也發(fā)生同步變化，而這種變化又反應(yīng)在p標(biāo)簽的表達(dá)式中，這樣便完成了文本框內(nèi)容與p標(biāo)簽內(nèi)容的綁定。
?
AngulerJS中的綁定是雙向的，如以下代碼，無論哪一個(gè)文本框的內(nèi)容發(fā)生變化，另一個(gè)也相應(yīng)同步修改：
<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
?
更多專業(yè)前端知識，請上 【猿2048】www.mk2048.com
總結(jié)
以上是生活随笔為你收集整理的AngularJS（三）：重复HTML元素、数据绑定的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： AngularJS（九）：路由
- 下一篇： tennylvHTML5实现屏幕手势解锁