AngularJS ng-repeat指令及Ajax的应用实例分析
codergirl 2017-07-06
本文实例讲述了AngularJS ng-repeat指令及Ajax的应用。分享给大家供大家参考，具体如下：
ng-repeat 指令用于循环输出指定次数的 HTML 元素。集合必须是数组或对象。
定义：
<element ng-repeat="expression"></element>
说明：experssion表达式定义了如何循环集合。常用的如：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样式设置样式。
<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:'化学',marks:90},
{name:'数学',marks:68},
{name:'英文',marks:85},
{name:'生物',marks:77},
],
fullName:function(){
var studentObject;
studentObject = $scope.student;
return studentObject.firstName+' '+studentObject.lastName;
}
};
});
</script>效果：
上面例子表格中展示的数据也可以通过ajax请求从服务器中获取，然后利用ng-repeat指令插入到页面中，具体实现见下面代码:
<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 表格应用示例</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>说明：需要放在服务器环境中运行
更多关于AngularJS相关内容感兴趣的读者可查看本站专题：《AngularJS指令操作技巧总结》、《AngularJS入门与进阶教程》及《AngularJS MVC架构总结》
希望本文所述对大家AngularJS程序设计有所帮助。
相关推荐
鸟菜小端前 0喜欢 / 0评论 2018-09-12
CrazyDogWang 0喜欢 / 0评论 2017-02-14
zbwroom 0喜欢 / 0评论 2016-09-23
youyouzouzou 0喜欢 / 0评论 2015-11-30
princejingyun 0喜欢 / 0评论 2013-01-30
Oranq 0喜欢 / 0评论 2013-09-24
闲听风月 0喜欢 / 0评论 2018-01-16
forthemyth 0喜欢 / 0评论 2017-09-18
Inuyasha 0喜欢 / 0评论 2017-01-21
forthemyth 0喜欢 / 0评论 2017-01-21
鸟菜小端前 0喜欢 / 0评论 2017-01-19
thesameguo 0喜欢 / 0评论 2016-12-31
itseebin 0喜欢 / 0评论 2019-04-29
DataCastle 0喜欢 / 0评论 2016-12-13
鸟菜小端前 0喜欢 / 0评论 2016-11-02
codergirl 0喜欢 / 0评论 2019-04-29
鸟菜小端前 0喜欢 / 0评论 2019-04-26
Inuyasha 0喜欢 / 0评论 2016-08-23
雅特岚蒂斯 0喜欢 / 0评论 2019-04-25
hxmilyy 0喜欢 / 0评论 2019-04-25
hxmilyy 0喜欢 / 0评论 2019-04-25
老卫的技术站 0喜欢 / 0评论 2019-04-21
编程爱好者联盟 0喜欢 / 0评论 2017-01-19