AngularJS資料來源怎樣循環輸出

這次帶給大家AngularJS資料來源怎樣循環輸出，AngularJS資料來源循環輸出的注意事項有哪些，下面就是實戰案例，一起來看一下。

AngularJS 中的資料來源的循環輸出

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

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

<ul>
  <li ng-class="idx==$index?&#39;color1&#39;:&#39;color2&#39;" 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="&#39;color2&#39;" 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裡面，在對類別中的具體數據進行循環輸出

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

推薦閱讀：

js實作簡易24小時時鐘

#Promise實作非同步

##

以上是AngularJS資料來源怎樣循環輸出的詳細內容。更多資訊請關注PHP中文網其他相關文章！