本文實例講述了AngularJS ng-repeat指令及Ajax的應(yīng)用。分享給大家供大家參考，具體如下：
ng-repeat 指令用于循環(huán)輸出指定次數(shù)的 HTML 元素。集合必須是數(shù)組或?qū)ο蟆?/span>
定義：
<element ng-repeat="expression"></element>
說明：experssion表達(dá)式定義了如何循環(huán)集合。常用的如：x in records
下面通過一個例子,來說明ng-repeat如何繪制一個表格：
<div ng-app='mainApp' ng-controller='studentController'> <table border="0"> <tr> <td>姓</td> <td><input type="text" ng-model='student.firstName'></td> </tr> <tr> <td>名</td> <td><input type="text" ng-model='student.lastName'></td> </tr> <tr> <td>名字</td> <td>{{student.fullName()}}</td> </tr> <tr> <td>科目</td> <td> <table> <tr> <th>名字</th> <th>標(biāo)記</th> </tr> <tr ng-repeat='sub in student.subjects'> <td>{{sub.name}}</td> <td>{{sub.marks}}</td> </tr> </table> </td> </tr> </table></div>表可以使用CSS樣式設(shè)置樣式。
<style> table, th , td { border: 1px solid grey; border-collapse: collapse; padding: 5px; } table tr:nth-child(odd) { background-color: #f2f2f2; } table tr:nth-child(even) { background-color: #ffffff; }</style>利用angularjs的ng-repeat指令繪制表格:
<script> var mainApp=angular.module('mainApp',[]); //定義一個名為mainApp的模塊 mainApp.controller('studentController',function($scope){ $scope.student={ firstName:'聶', lastName:'鵬飛', subjects:[ {name:'物理',marks:73}, {name:'化學(xué)',marks:90}, {name:'數(shù)學(xué)',marks:68}, {name:'英文',marks:85}, {name:'生物',marks:77}, ], fullName:function(){ var studentObject; studentObject = $scope.student; return studentObject.firstName+' '+studentObject.lastName; } }; });</script>效果：
上面例子表格中展示的數(shù)據(jù)也可以通過ajax請求從服務(wù)器中獲取，然后利用ng-repeat指令插入到頁面中，具體實現(xiàn)見下面代碼:
<html><head><title>Angular JS Controller</title><script src="angularjs/angular-1.3.0/angular.min.js"></script><style> table, th , td { border: 1px solid grey; border-collapse: collapse; padding: 5px; } table tr:nth-child(odd) { background-color: #f2f2f2; } table tr:nth-child(even) { background-color: #ffffff; }</style></head><body> <h2>AngularJS 表格應(yīng)用示例</h2> <div ng-app='mainApp' ng-controller='studentController'> <table border="0"> <tr> <td>姓</td> <td><input type="text" ng-model='student.firstName'></td> </tr> <tr> <td>名</td> <td><input type="text" ng-model='student.lastName'></td> </tr> <tr> <td>名字</td> <td>{{student.fullName()}}</td> </tr> <tr> <td>科目</td> <td> <table> <tr> <th>名字</th> <th>標(biāo)記</th> </tr> <tr ng-repeat='sub in student.subjects'> <td>{{sub.name}}</td> <td>{{sub.marks}}</td> </tr> </table> </td> </tr> </table> </div> <script> var mainApp=angular.module('mainApp',[]); mainApp.controller('studentController',function($scope,$http){ $scope.student={ firstName:'聶', lastName:'鵬飛', fullName:function(){ var studentObject; studentObject = $scope.student; return studentObject.firstName+' '+studentObject.lastName; }, }; var url="data.txt"; $http.post(url).success(function(response){ $scope.student.subjects=response; }) }); </script></body></html>說明：需要放在服務(wù)器環(huán)境中運行
更多關(guān)于AngularJS相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《AngularJS指令操作技巧總結(jié)》、《AngularJS入門與進(jìn)階教程》及《AngularJS MVC架構(gòu)總結(jié)》
希望本文所述對大家AngularJS程序設(shè)計有所幫助。
新聞熱點
疑難解答
