我试图从 json 结构制作一个表格，但无法正确渲染它。
前两个单元格的输出未正确显示； Partial 是空的，它正在填充唯一的最后一个。请引用下图
Controller .js
.controller('wController', function($scope, $http) {
console.log('i m in ctrl 3');
$http({
method: "GET",
url: "http://custom.url.ch:3021/routepath",
headers: {
'Authorization': 'Basic Ydaeq2FwaQw1='
}
// headers : {"Authorization": "Basic " + auth}
}).then(function(response) {
console.log("yoyo", JSON.stringify(response));
$scope.data = response.data;
}, function(response) {
console.log("oaapop" + JSON.stringify(response));
});
});
//index.html
<div class="table-responsive" ng-controller="woController">
<table class="table table-condensed" border="1">
<thead>
<tr>
<th>Sites</th>
<th ng-repeat="worstData in data">
<center>{{$index+1}}</center>
</th>
<!-- <th><center>2</center></th> -->
<!-- <th><center>3</center></th> -->
<!-- <th><center>4</center></th> -->
<!-- <th><center>5</center></th> -->
</tr>
</thead>
<!-- <tbody> -->
<tbody>
<tr>
<td> PartialSite</td>
<td ng-repeat="worstData in data">{{$index}} {{[worstData[0][$index].PartialSite]}}</td>
</tr>
<tr>
<td>FailSite</td>
<td> </td>
<td></td>
<td> </td>
</tr>
<tr>
<td> Jobs mn</td>
<td> </td>
<td></td>
<td> </td>
</tr>
<tr>
<td>Largest Points</td>
<td> </td>
<td></td>
<td> </td>
</tr>
</tbody>
</table>
</div>
//JSON结构制作表结构
{
"data": {
"statusCode": 200,
"message": "Getting Data",
"data": [
[{
"PartialSite": "LRS",
"Partial": 2
}, {
"PartialSite": "Sooking",
"Partial": 1
}, {
"PartialSite": "Late",
"Partial": 1
}],
[{
"FailSite": "Sotelia",
"fail": 2
}, {
"FailSite": "Pccor",
"fail": 1
}, {
"FailSite": "PccroHotels",
"fail": 0
}],
[{
"ExecSite": "Sotelia",
"time": 240
}, {
"ExecSite": "Late",
"time": 240
}, {
"ExecSite": "Pccor",
"time": 120
}],
[{
"DataSite": "LRS",
"totalDP": 16
}, {
"DataSite": "Sooking",
"totalDP": 14
}, {
"DataSite": "Pccor",
"totalDP": 12
}]
]
},
"status": 200,
"config": {
"method": "GET",
"transformRequest": [null],
"transformResponse": [null],
"url": "http://custom.url.ch:3021/routepath",
"headers": {
"Authorization": "Basic Ydaeq2FwaQw1=",
"Accept": "application/json, text/plain, */*"
}
},
"statusText": "OK"
}
最佳答案
这就是您要找的吗 - https://plnkr.co/edit/aMYrwNPHCkGnxftZgke4?p=preview
<body data-ng-controller="sampleCtrl as ctrl">
<table class="table table-condensed" border ="1" >
<thead >
<tr>
<th>Sites</th>
<th ng-repeat="worstData in ctrl.data"><center>{{$index+1}}</center></th>
<!-- <th><center>2</center></th> -->
<!-- <th><center>3</center></th> -->
<!-- <th><center>4</center></th> -->
<!-- <th><center>5</center></th> -->
</tr>
</thead>
<!-- <tbody> -->
<tbody >
<tr >
<td > PartialSite</td>
<td ng-repeat="worstData in ctrl.data[0]">{{$index}} {{worstData.PartialSite}}</td>
</tr>
<tr>
<td>FailSite</td>
<td ng-repeat="worstData in ctrl.data[1]">{{$index}} {{worstData.FailSite}}</td>
</tr>
<tr>
<td> Jobs mn</td>
<td ng-repeat="worstData in ctrl.data[2]">{{$index}} {{worstData.time}}</td>
</tr>
<tr>
<td>Largest Points</td>
<td ng-repeat="worstData in ctrl.data[3]">{{$index}} {{worstData.totalDP}}</td>
</tr>
</tbody>
</table>
</body>
关于javascript - Angular ng-repeat 无法正确渲染数据，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41499051/