AngularJS數據源怎樣循環輸出

AngularJS 中的數據源的循環輸出

最近也是剛剛接觸angular前端框架的，但使用的幾天就感覺效果比較明顯，尤其是在數據的輸出效果上來看，比原生的js的編程效率要高許多，所以這也就是為什么許多公司都要求前端開發需要你熟悉使用前端框架了，可以更快的提高項目的效率。今天想要說的就是在使用angular前端框架的時候的數據源的循環輸出。

把數組中的數據循環輸出到頁面上，如果使用的js的方法的話就是需要對數組進行for循環輸出，并且在輸出的時候是對頁面中的DOM層中的節點進行操作的，而如果使用前端框架的話（angular），它里面已經封裝好了數據循環輸出的指令，即ng-repeat。

<ul>
 <li ng-class="idx==$index?'color1':'color2'" ng-repeat=" item in book track by $index">{{item.name}}{{$index}}</li>
</ul>

這里面就是對數組book中的數據進行循環輸出，使用框架里面封裝好的指令都是它特有的前面是ng-來說明標注的，就像在微信開發中使用里面的指令的時候前面有wx-來標注說明一樣的效果。

但如果你的界面涉及到tab欄的切換，界面可能會出現像左邊是種類右邊是具體種類所對應的數據時的話呢，即你的數據是可能類似于

$scope.book=[{idx:7,name:"軍事",value:[{name:'美國的城市政治',price:37},{name:'兵法簡述',price:45},{name:'國防論',price:14},{name:'總體戰',price:13},{name:'海軍戰略論',price:11}]},
{idx:8,name:"情感",value:[{name:'三體',price:12}]}]

如何把軍事所對應的具體數據顯示在界面上，或者把情感所對應的具體數據顯示在界面的上的話，其實就是根據數據的分類來進行分類輸出數據

<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">價格：{{items.price|currency:'￥'}}</span>
 <button ng-click="add($index)">添加至購物車</button>
 </li>
 </ul>
 </li>
</ul>

這樣輸出的效果就是根據數據中的分類來把數據進行分類輸出，即一個兩層的嵌套循環，第二層循環的數據是第一次循環之后的結果，這樣就可以把一種類別的數據輸出到li下面的ul里面，在對類別中的具體數據進行循環輸出

相信看了本文案例你已經掌握了方法，更多精彩請關注Gxl網其它相關文章！

推薦閱讀：

js實現簡易24小時時鐘

Promise實現異步

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com