2013年2月17日 星期日

AngularJS 迴圈讀取資料 ng-repeat



在AngularJS內要寫迴圈也很方便,準備類似下面的html
  1. <div ng-controller="PhoneListCtrl">    
  2.     <ul>   
  3.         <li ng-repeat="phone in phones">   
  4.             {{phone.name}}   
  5.             <p>{{phone.snippet}}</p>   
  6.         </li>   
  7.     </ul>   
  8. </div>   



在controller內放一個json格式的data
  1. function PhoneListCtrl($scope) {   
  2.     $scope.phones = [   
  3.     {"name""Nexus S",   
  4.     "snippet""Fast just got faster with Nexus S."},   
  5.     {"name""Motorola XOOM™ with Wi-Fi",   
  6.     "snippet""The Next, Next Generation tablet."},   
  7.     {"name""MOTOROLA XOOM™",   
  8.     "snippet""The Next, Next Generation tablet."}   
  9.     ];   
  10.  }  

這樣就可以把data用迴圈跑出來到html內了,真的很方便。

另外想知道json的資料筆數,可以這樣寫
  1. <p>Total number of phones: {{phones.length}}</p>  

Demo
參考資料
反應:

0 意見:

Related Posts Plugin for WordPress, Blogger...