如何使用角度在表格的两列中显示json数据
问题描述:
我的数据在我的json中是动态的,我想在两列的表格中显示数据。我正在尝试,但只有前两个记录重复。我没有看到表格中的所有记录。任何帮助?如何使用角度在表格的两列中显示json数据
http://plnkr.co/edit/Hnb7hkjA16XDbzRT8VAt?p=preview
This is my json : var data = '{
"output":{
"service-status":[
{
"service":"db",
"service-name":"Mongo DB"
},
{
"service":"license",
"service-name":"Smart License"
},
{
"service":"BRM",
"service-name":"Billing"
},
{
"service":"subscription",
"service-name":"subscription"
}
]
}
}';
我的html代码:
<table border="1px" width="100%" ng-repeat="data in serviceData" ng-if="$index % 2 == 0">
<tr>
<td>{{serviceData[index]["service-name"]}}</td>
</tr>
</table>
i want to display something like this
Mongo Db Smart License
Billing subscription
答
变换控制器数据:
var serviceDataView = function() {
var res = [];
for (var i = 0; i < $scope.serviceData.length; i+=2){
res.push({
col1: $scope.serviceData[i]['service-name'],
col2: $scope.serviceData[i+1] ? $scope.serviceData[i+1]['service-name'] : null
});
}
return res;
};
$scope.structuredData = serviceDataView();
所以它可以在视图中轻松的使用:
<table border="1px" width="100%">
<tr ng-repeat="data in structuredData">
<td>{{data.col1}}</td>
<td>{{data.col2}}</td>
</tr>
</table>
答
使用ng-repeat的迭代器是$ index。
其他迭代器:https://docs.angularjs.org/api/ng/directive/ngRepeat
替换您的表:
<table border="1px" width="100%" ng-repeat="data in serviceData">
<tr>
<td>{{serviceData[$index]["service"]}}</td>
<td>{{serviceData[$index]["service-name"]}}</td>
</tr>
</table>
答
按我的审查,则不需要$指数在所有的这个问题。您可以使用筛选器表ngRepeat.check此[链接] http://plnkr.co/edit/Hnb7hkjA16XDbzRT8VAt?p=preview
html code here:
<table border="1px" width="100%" ng-repeat="data in serviceData |limitTo:2 ">
<tr>
<td>{{data["service-name"]}}</td>
<td>{{data.service}}</td>
</tr>
说起来很简单,每项记录都在单独一行显示。我需要以两列显示数据。 – Kiran
我已经用我的要求更新了这里的抢劫者。 http://plnkr.co/edit/kvWSDhCnWiVhT3PVLXo1?p=preview检查html页面的评论部分 – Kiran
@Kiran,那么你应该先在控制器中准备你的数据,然后在视图中使用简化的数据结构。这里[plunker](http://plnkr.co/edit/sy0boEFIFLfdoHPKy1Co?p=preview) –