表中的数据基本上是可重复的, 因此你可以使用
轻松创建表的指令
该示例将清除该方法。
语法如下：
<element ng-repeat="expression">Content..<element>表中显示的数据。
<!DOCTYPE html>
< html >
< head >
< title >AngularJS ng-repeat Directive</ title >
</ head >
< body >
< center >
< h1 style = "color:green;" >GeekforGeeks</ h1 >
< table >
< tr >
< th >Course</ th >
< th >Duration</ th >
</ tr >
< tr ng-repeat = "subject in student.subjects" >
< td >{{ Course.name }}</ td >
< td >{{ Duration.time }}</ td >
</ tr >
</ table >
</ center >
</ body >
</ html >输出如下：
以CSS样式显示
< style >
table, th , td {
border: 1px solid black;
border-collapse: collapse;
padding: 5px;
}
table tr:nth-child(odd) {
background-color: #82E0AA ;
}
table tr:nth-child(even) {
background-color: #2ECC71 ;
}
h1{
color:green;
}
</ style >AnhularJS ng-repeat指令带有以上代码的示例：在这里, 你将看到上述html和css与AngularJS ng-repeat指令的组合。
<!DOCTYPE html>
< html >
< head >
< title >Angular JS Table</ title >
< script src =
"https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js" >
</ script >
< style >
table, th , td {
border: 1px solid black;
border-collapse: collapse;
padding: 5px;
}
table {
background-color: grey;
}
h1{
color:green;
}
</ style >
</ head >
< body >
< center >
< h1 >lsbin</ h1 >
< div ng-app = "mainApp" ng-controller = "studentController" >
< table border = "0" >
< tr >
< td >Enter first name:</ td >
< td >< input type = "text" ng-model = "student.firstName" ></ td >
</ tr >
< tr >
< td >Enter last name: </ td >
< td >
< input type = "text" ng-model = "student.lastName" >
</ td >
</ tr >
< tr >
< td >Name: </ td >
< td >{{student.fullName()}}</ td >
</ tr >
< tr >
< td >Subject:</ td >
< td >
< table >
< tr >
< th >Name</ th >.
< th >Marks</ th >
</ tr >
< tr ng-repeat = "subject in student.subjects" >
< td >{{ subject.name }}</ td >
< td >{{ subject.marks }}</ td >
</ tr >
</ table >
</ td >
</ tr >
</ table >
</ div >
< script >
var mainApp = angular.module("mainApp", []);
mainApp.controller('studentController', function($scope) {
$scope.student = {
firstName: "Pranab", lastName: "Mukherjee", subjects:[
{name:'Algorithm', marks:70}, {name:'Data Structure', marks:80}, {name:'Architecture', marks:65}, {name:'Digital Analog', marks:75}
], fullName: function() {
var studentObject;
studentObject = $scope.student;
return studentObject.firstName + " " + studentObject.lastName;
}
};
});
</ script >
</ center >
</ body >
</ html >输出如下：
