我正在调用 API，并希望使用 anugularjs 以表格格式打印我的 JSON 结果。所以我在函数(myfunc)中声明了一个硬编码数组(train)。现在我想以表格格式打印数组。 这是我尝试过的代码:
function myfunc() {
var train = [{
"TrainNo": "11043",
"TrainName": "MADURAI EXPRESS",
"Source": "LTT",
"ArrivalTime": "03:50",
"Destination": "PUNE",
"DepartureTime": "00:15",
"TravelTime": "03:35H",
"TrainType": "EXP"
},
{
"TrainNo": "16533",
"TrainName": "BGKT SBC EXPRES",
"Source": "KYN",
"ArrivalTime": "04:10",
"Destination": "PUNE",
"DepartureTime": "01:05",
"TravelTime": "03:05H",
"TrainType": "EXP"
}
];
}
myfunc();
var app = angular.module('myApp', []);
app.controller('Ctrl', function($scope) {
$scope.names = train;
});<!DOCTYPE html>
<html>
<style>
table,
th,
td {
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;
}
table tr:nth-child(odd) {
background-color: #f1f1f1;
}
table tr:nth-child(even) {
background-color: #ffffff;
}
</style>
<script src="https://code.jquery.com/jquery-3.0.0.js">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
<body>
<div ng-app="myApp" ng-controller="Ctrl">
<table>
<tr>
<th>Name</th>
<th>Class</th>
<th>Department</th>
</tr>
<tr ng-repeat="x in names">
<td>{{x.TrainName}}</td>
<td>{{x.TrainName}}</td>
<td>{{x.Source}}</td>
<td>{{x.Class}}</td>
<td>{{ x.Department}}</td>
</tr>
</table>
</div>
</body>
</html>我已经尝试了这段代码，但仍然无法在表中插入数据。
最佳答案
首先要做的事情。您已在函数中声明了变量 train，因此您无法通过 Controller 访问它。将其设为全局变量也不是一个好主意。由于您使用的是 angularjs，因此您可以使用其主要功能之一，称为 service (请在下面的代码中查看它并了解我如何使用它)。
其次，您应该始终使 <th> 计数与 <td> 相同。在您的代码中，您有 3 <th> 和 5 <td>
第三，您正在调用未在对象中声明的属性。始终使用您在对象中声明的属性。
您可以运行下面的代码来检查正确的输出
var app = angular.module('myApp', []);
app.service('TrainService', function() {
var train = [{
"TrainNo": "11043",
"TrainName": "MADURAI EXPRESS",
"Source": "LTT",
"ArrivalTime": "03:50",
"Destination": "PUNE",
"DepartureTime": "00:15",
"TravelTime": "03:35H",
"TrainType": "EXP"
},
{
"TrainNo": "16533",
"TrainName": "BGKT SBC EXPRES",
"Source": "KYN",
"ArrivalTime": "04:10",
"Destination": "PUNE",
"DepartureTime": "01:05",
"TravelTime": "03:05H",
"TrainType": "EXP"
}
];
return { getTrain: getTrain };
function getTrain() {
return train;
}
});
app.controller('Ctrl', function($scope, TrainService) {
$scope.names = TrainService.getTrain();
});
<!DOCTYPE html>
<html>
<style>
table,
th,
td {
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;
}
table tr:nth-child(odd) {
background-color: #f1f1f1;
}
table tr:nth-child(even) {
background-color: #ffffff;
}
</style>
<script src="https://code.jquery.com/jquery-3.0.0.js">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
<body>
<div ng-app="myApp" ng-controller="Ctrl">
<table>
<tr>
<th>TrainNo</th>
<th>Name</th>
<th>Source</th>
<th>Destination</th>
<th>TrainType</th>
</tr>
<tr ng-repeat="x in names">
<td>{{x.TrainNo}}</td>
<td>{{x.TrainName}}</td>
<td>{{x.Source}}</td>
<td>{{x.Destination}}</td>
<td>{{x.TrainType}}</td>
</tr>
</table>
</div>
</body>
</html>关于javascript - 如何使用 angularjs 以表格格式打印数组？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56883036/