ajax后再ng-repeat,AngularJS ng-repeat指令及Ajax的应用实例分析

本文实例讲述了AngularJS ng-repeat指令及Ajax的应用。分享给大家供大家参考，具体如下：

ng-repeat 指令用于循环输出指定次数的 HTML 元素。集合必须是数组或对象。

定义：

说明：experssion表达式定义了如何循环集合。常用的如：x in records

下面通过一个例子,来说明ng-repeat如何绘制一个表格：

姓
名
名字	{{student.fullName()}}
科目	名字 标记 {{sub.name}} {{sub.marks}}

表可以使用CSS样式设置样式。

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;

}

利用angularjs的ng-repeat指令绘制表格:

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;

}

};

});

效果：

上面例子表格中展示的数据也可以通过ajax请求从服务器中获取，然后利用ng-repeat指令插入到页面中，具体实现见下面代码:

Angular JS Controller

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;

}

AngularJS 表格应用示例

姓
名
名字	{{student.fullName()}}
科目	名字 标记 {{sub.name}} {{sub.marks}}

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;

})

});

说明：需要放在服务器环境中运行

希望本文所述对大家AngularJS程序设计有所帮助。