如何使用angular在表的兩列中顯示json數據

Question

我在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

Answer 1

在控制器中轉換數據：

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>

柱塞 。

Answer 2

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

Answer 3

根據我的評論，這個問題根本不需要$ index。 您可以對表ngRepeat使用過濾器。請檢查此[鏈接] 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>