AngularJS 迴圈讀取資料 ng-repeat

在AngularJS內要寫迴圈也很方便，準備類似下面的html

view plaincopy to clipboardprint

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

view plaincopy to clipboardprint

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的資料筆數，可以這樣寫

view plaincopy to clipboardprint

1. <p>Total number of phones: {{phones.length}}</p>  

Demo
參考資料