您好,登錄后才能下訂單哦!
AngularJS 中的數(shù)據(jù)源的循環(huán)輸出
最近也是剛剛接觸angular前端框架的,但使用的幾天就感覺效果比較明顯,尤其是在數(shù)據(jù)的輸出效果上來看,比原生的js的編程效率要高許多,所以這也就是為什么許多公司都要求前端開發(fā)需要你熟悉使用前端框架了,可以更快的提高項(xiàng)目的效率。今天想要說的就是在使用angular前端框架的時(shí)候的數(shù)據(jù)源的循環(huán)輸出。
把數(shù)組中的數(shù)據(jù)循環(huán)輸出到頁面上,如果使用的js的方法的話就是需要對(duì)數(shù)組進(jìn)行for循環(huán)輸出,并且在輸出的時(shí)候是對(duì)頁面中的DOM層中的節(jié)點(diǎn)進(jìn)行操作的,而如果使用前端框架的話(angular),它里面已經(jīng)封裝好了數(shù)據(jù)循環(huán)輸出的指令,即ng-repeat。
<ul> <li ng-class="idx==$index?'color1':'color2'" ng-repeat=" item in book track by $index">{{item.name}}{{$index}}</li> </ul>
這里面就是對(duì)數(shù)組book中的數(shù)據(jù)進(jìn)行循環(huán)輸出,使用框架里面封裝好的指令都是它特有的前面是ng-來說明標(biāo)注的,就像在微信開發(fā)中使用里面的指令的時(shí)候前面有wx-來標(biāo)注說明一樣的效果。
但如果你的界面涉及到tab欄的切換,界面可能會(huì)出現(xiàn)像左邊是種類右邊是具體種類所對(duì)應(yīng)的數(shù)據(jù)時(shí)的話呢,即你的數(shù)據(jù)是可能類似于
$scope.book=[{idx:7,name:"軍事",value:[{name:'美國(guó)的城市政治',price:37},{name:'兵法簡(jiǎn)述',price:45},{name:'國(guó)防論',price:14},{name:'總體戰(zhàn)',price:13},{name:'海軍戰(zhàn)略論',price:11}]}, {idx:8,name:"情感",value:[{name:'三體',price:12}]}]
如何把軍事所對(duì)應(yīng)的具體數(shù)據(jù)顯示在界面上,或者把情感所對(duì)應(yīng)的具體數(shù)據(jù)顯示在界面的上的話,其實(shí)就是根據(jù)數(shù)據(jù)的分類來進(jìn)行分類輸出數(shù)據(jù)
<ul> <li ng-repeat=" item in book track by $index"> <ul> <li ng-class="'color2'" ng-repeat=" items in item.value|page:nowpage:3"> {{items.name}} <span class="price">價(jià)格:{{items.price|currency:'¥'}}</span> <button ng-click="add($index)">添加至購物車</button> </li> </ul> </li> </ul>
這樣輸出的效果就是根據(jù)數(shù)據(jù)中的分類來把數(shù)據(jù)進(jìn)行分類輸出,即一個(gè)兩層的嵌套循環(huán),第二層循環(huán)的數(shù)據(jù)是第一次循環(huán)之后的結(jié)果,這樣就可以把一種類別的數(shù)據(jù)輸出到li下面的ul里面,在對(duì)類別中的具體數(shù)據(jù)進(jìn)行循環(huán)輸出
如有疑問請(qǐng)留言或者到本站社區(qū)交流討論,感謝閱讀,希望能幫助到大家,謝謝大家對(duì)本站的支持!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。