AngularJS 中的數(shù)據(jù)源的循環(huán)輸出

成都創(chuàng)新互聯(lián)公司2013年開創(chuàng)至今，先為商州等服務(wù)建站，商州等地企業(yè)，進行企業(yè)商務(wù)咨詢服務(wù)。為商州企業(yè)網(wǎng)站制作PC+手機+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。

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

        把數(shù)組中的數(shù)據(jù)循環(huán)輸出到頁面上，如果使用的js的方法的話就是需要對數(shù)組進行for循環(huán)輸出，并且在輸出的時候是對頁面中的DOM層中的節(jié)點進行操作的，而如果使用前端框架的話（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>

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

         但如果你的界面涉及到tab欄的切換，界面可能會出現(xiàn)像左邊是種類右邊是具體種類所對應(yīng)的數(shù)據(jù)時的話呢，即你的數(shù)據(jù)是可能類似于

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

         如何把軍事所對應(yīng)的具體數(shù)據(jù)顯示在界面上，或者把情感所對應(yīng)的具體數(shù)據(jù)顯示在界面的上的話，其實就是根據(jù)數(shù)據(jù)的分類來進行分類輸出數(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">價格：{{items.price|currency:'￥'}}</span>
        <button ng-click="add($index)">添加至購物車</button>
      </li>
    </ul>
  </li>
</ul>

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

如有疑問請留言或者到本站社區(qū)交流討論，感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！

本文題目：AngularJS中的數(shù)據(jù)源的循環(huán)輸出
文章轉(zhuǎn)載：http://chinadenli.net/article4/gisiie.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供面包屑導航、App設(shè)計、動態(tài)網(wǎng)站、Google、服務(wù)器托管、商城網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)