AngularJS ng-repeat指令及Ajax的應(yīng)用實(shí)例分析
本文實(shí)例講述了AngularJS ng-repeat指令及Ajax的應(yīng)用。分享給大家供大家參考,具體如下:
ng-repeat 指令用于循環(huán)輸出指定次數(shù)的 HTML 元素。集合必須是數(shù)組或?qū)ο蟆?/span>
定義:
<element ng-repeat="expression"></element>
說(shuō)明:experssion表達(dá)式定義了如何循環(huán)集合。常用的如:x in records
下面通過(guò)一個(gè)例子,來(lái)說(shuō)明ng-repeat如何繪制一個(gè)表格:
<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',[]); //定義一個(gè)名為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ù)也可以通過(guò)ajax請(qǐng)求從服務(wù)器中獲取,然后利用ng-repeat指令插入到頁(yè)面中,具體實(shí)現(xiàn)見(jià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>
說(shuō)明:需要放在服務(wù)器環(huán)境中運(yùn)行
更多關(guān)于AngularJS相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《AngularJS指令操作技巧總結(jié)》、《AngularJS入門與進(jìn)階教程》及《AngularJS MVC架構(gòu)總結(jié)》
希望本文所述對(duì)大家AngularJS程序設(shè)計(jì)有所幫助。
- AngularJs ng-repeat 嵌套如何獲取外層$index
- AngularJS入門(用ng-repeat指令實(shí)現(xiàn)循環(huán)輸出
- AngularJS ng-repeat數(shù)組有重復(fù)值的解決方法
- Angularjs的ng-repeat中去除重復(fù)數(shù)據(jù)的方法
- AngularJS使用ng-repeat指令實(shí)現(xiàn)下拉框
- AngularJS基礎(chǔ) ng-repeat 指令簡(jiǎn)單示例
- Angularjs中ng-repeat-start與ng-repeat-end的用法實(shí)例介紹
- AngularJS實(shí)現(xiàn)ajax請(qǐng)求的方法
- AngularJS入門教程之與服務(wù)器(Ajax)交互操作示例【附完整demo源碼下載】
- 實(shí)例詳解angularjs和ajax的結(jié)合使用
- 在AngularJS中使用AJAX的方法
相關(guān)文章
angular5 httpclient的示例實(shí)戰(zhàn)
本篇文章主要介紹了angular5 httpclient的示例實(shí)戰(zhàn),小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-03-03強(qiáng)大的 Angular 表單驗(yàn)證功能詳細(xì)介紹
本篇文章主要介紹了強(qiáng)大的 Angular 表單驗(yàn)證功能詳細(xì)介紹,使用 Angular 的內(nèi)置表單校驗(yàn)?zāi)軌蛲瓿山^大多數(shù)的業(yè)務(wù)場(chǎng)景的校驗(yàn)需求,有興趣的可以了解一下2017-05-05AngularJS自定義過(guò)濾器用法經(jīng)典實(shí)例總結(jié)
這篇文章主要介紹了AngularJS自定義過(guò)濾器用法,結(jié)合實(shí)例形式總結(jié)分析了AngularJS自定義過(guò)濾器進(jìn)行包含、替換、篩選、過(guò)濾、排序等操作相關(guān)實(shí)現(xiàn)技巧與注意事項(xiàng),需要的朋友可以參考下2018-05-05Angular將填入表單的數(shù)據(jù)渲染到表格的方法
這篇文章主要介紹了Angular將填入表單的數(shù)據(jù)渲染到表格的方法,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2017-09-09AngularJS全局警告框?qū)崿F(xiàn)方法示例
這篇文章主要介紹了AngularJS全局警告框?qū)崿F(xiàn)方法,結(jié)合實(shí)例形式分析了AngularJS全局警告框的實(shí)現(xiàn)步驟與相關(guān)操作技巧,需要的朋友可以參考下2017-05-05AngularJS框架的ng-app指令與自動(dòng)加載實(shí)現(xiàn)方法分析
這篇文章主要介紹了AngularJS框架的ng-app指令與自動(dòng)加載實(shí)現(xiàn)方法,結(jié)合實(shí)例形式分析了ng-app指令的功能及自動(dòng)加載機(jī)制的實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-01-01詳解angularjs4部署文件過(guò)大解決過(guò)程
這篇文章主要介紹了詳解angularjs4部署文件過(guò)大解決過(guò)程,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-12-12