AngularJS ng-repeat指令及Ajax的應(yīng)用實例分析
本文實例講述了AngularJS ng-repeat指令及Ajax的應(yīng)用。分享給大家供大家參考,具體如下:
ng-repeat 指令用于循環(huán)輸出指定次數(shù)的 HTML 元素。集合必須是數(shù)組或?qū)ο蟆?/span>
定義:
<element ng-repeat="expression"></element>
說明:experssion表達式定義了如何循環(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>標記</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>標記</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入門與進階教程》及《AngularJS MVC架構(gòu)總結(jié)》
希望本文所述對大家AngularJS程序設(shè)計有所幫助。
- AngularJs ng-repeat 嵌套如何獲取外層$index
- AngularJS入門(用ng-repeat指令實現(xiàn)循環(huán)輸出
- AngularJS ng-repeat數(shù)組有重復(fù)值的解決方法
- Angularjs的ng-repeat中去除重復(fù)數(shù)據(jù)的方法
- AngularJS使用ng-repeat指令實現(xiàn)下拉框
- AngularJS基礎(chǔ) ng-repeat 指令簡單示例
- Angularjs中ng-repeat-start與ng-repeat-end的用法實例介紹
- AngularJS實現(xiàn)ajax請求的方法
- AngularJS入門教程之與服務(wù)器(Ajax)交互操作示例【附完整demo源碼下載】
- 實例詳解angularjs和ajax的結(jié)合使用
- 在AngularJS中使用AJAX的方法
相關(guān)文章
angular5 httpclient的示例實戰(zhàn)
本篇文章主要介紹了angular5 httpclient的示例實戰(zhàn),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-03-03AngularJS自定義過濾器用法經(jīng)典實例總結(jié)
這篇文章主要介紹了AngularJS自定義過濾器用法,結(jié)合實例形式總結(jié)分析了AngularJS自定義過濾器進行包含、替換、篩選、過濾、排序等操作相關(guān)實現(xiàn)技巧與注意事項,需要的朋友可以參考下2018-05-05Angular將填入表單的數(shù)據(jù)渲染到表格的方法
這篇文章主要介紹了Angular將填入表單的數(shù)據(jù)渲染到表格的方法,非常具有實用價值,需要的朋友可以參考下2017-09-09AngularJS全局警告框?qū)崿F(xiàn)方法示例
這篇文章主要介紹了AngularJS全局警告框?qū)崿F(xiàn)方法,結(jié)合實例形式分析了AngularJS全局警告框的實現(xiàn)步驟與相關(guān)操作技巧,需要的朋友可以參考下2017-05-05AngularJS框架的ng-app指令與自動加載實現(xiàn)方法分析
這篇文章主要介紹了AngularJS框架的ng-app指令與自動加載實現(xiàn)方法,結(jié)合實例形式分析了ng-app指令的功能及自動加載機制的實現(xiàn)技巧,需要的朋友可以參考下2017-01-01