如何使用角度在表格的两列中显示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

来源

2016-06-10 Kiran

变换控制器数据：

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>

Plunker。

来源

2016-06-10 18:01:30

说起来很简单，每项记录都在单独一行显示。我需要以两列显示数据。 – Kiran

我已经用我的要求更新了这里的抢劫者。 http://plnkr.co/edit/kvWSDhCnWiVhT3PVLXo1?p=preview检查html页面的评论部分 – Kiran

@Kiran，那么你应该先在控制器中准备你的数据，然后在视图中使用简化的数据结构。这里[plunker]（http://plnkr.co/edit/sy0boEFIFLfdoHPKy1Co?p=preview） –

使用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>

来源

2016-06-10 18:25:33

按我的审查，则不需要$指数在所有的这个问题。您可以使用筛选器表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>

来源

2016-06-11 07:07:55

如何使用角度在表格的两列中显示json数据

回答

相关问题