ng-repeate用於多重數據對象

Question

我正在使用角度js。我得到了性反應的象下面這樣：

"data": [ 
{ 
    "id": 1, 
    "name": "Afghanistan", 
    "sortname": "AF", 
    "deleted_at": null, 
    "created_at": null, 
    "updated_at": "2017-01-28 06:36:56", 
    "states": [ 
    { 
     "id": 42, 
     "name": "Badakhshan", 
     "country_id": 1, 
     "deleted_at": null, 
     "created_at": null, 
     "updated_at": null 
    }, 
    { 
     "id": 43, 
     "name": "Badgis", 
     "country_id": 1, 
     "deleted_at": null, 
     "created_at": null, 
     "updated_at": null 
    } 
    ] 
}, 
{ 
    "id": 2, 
    "name": "Algeria", 
    "sortname": "AL", 
    "deleted_at": null, 
    "created_at": null, 
    "updated_at": "2017-01-28 06:36:56", 
    "states": [ 
    { 
    "id": 44, 
    "name": "Badakhshan", 
    "country_id": 2, 
    "deleted_at": null, 
    "created_at": null, 
    "updated_at": null 
    } 
    ] 
}] 

所以，現在我想顯示像國名狀態的名字和它的動作，看起來像下面的數據：

在這裏，我只拿到了國名。州名不可見。

我的角碼是看起來像下面：

<div ng-controller="StatesController as vm"> 

    <table class="table table-hover dataTable" id="table-editable"> 
        <thead> 
         <tr> 
          <th>Country name</th> 
          <th>State name</th> 
          <th class="text-right">Action</th> 
         </tr> 
        </thead> 
        <tbody dir-paginate="listdata in vm.listdata | itemsPerPage:10" total-items="vm.totalItems"> 
         <tr ng-repeat="state in listdata.states"> 
          <td>{{listdata.name}}</td> 
          <td >{{state.name}}</td> 
          <td class="text-right"> 
           <a class="edit btn btn-sm btn-default" data-toggle="modal" ng-click="vm.edit(state.id,$index)" data-target="#addNew"> 
            <i class="icon-note"></i> 
           </a> 
           <a class="delete btn btn-sm btn-danger" ng-click="vm.remove(state.id,$index)"> 
            <i class="icons-office-52"></i> 
           </a> 
          </td> 
         </tr> 
        </tbody> 
       </table> 
    </div> 

注：我想與國名一起顯示在不同的行中的每個狀態。

說明：這裏我改變了HTML代碼。

它顯示國家和州，因爲我想，但它分頁到10個國家。而不是10生。那麼我需要改變什麼？

Answer 1

它應該是，

<tr dir-paginate="listdata in vm.listdata.data | itemsPerPage:10" 

Answer 2

你states屬性是你的對象數組，所以你可以做：

<td>{{ listdata.name }}</td> 
<td><span ng-repeat="state in listdata.states">{{ state.name }}</span></td> 

或者，如果你只是想顯示一個國家（第一一個）：

<td>{{ listdata.name }}</td> 
<td>{{ listdata.states[0].name }}</td> 

或者，如果你想爲每個狀態的新行：

<tbody ng-repeat="listdata in vm.listdata> 
    <tr ng-repeat="state in listdata.states"> 
     <td>{{ listdata.name }}</td> 
     <td>{{ state.name }}</dt> 
    </tr> 
</tbody> 

Answer 3

你正試圖從陣列訪問的名字，但按照你的JSON對象應該是這樣的下方，也同樣可以添加標題

<td ng-repeat="stateName in listdata.states">{{stateName}}</td> 

Answer 4

試試這個

             
  
 
   
 
    
</script> 
 

 
<div ng-controller="StatesController"> 
 
\t {{listdata}} 
 
\t <table class="table table-hover dataTable" id="table-editable"> 
 
\t \t <thead> 
 
\t \t \t <tr> 
 
\t \t \t \t <th>Country name</th> 
 
\t \t \t \t <th>State name</th> 
 
\t \t \t \t <th class="text-right">Action</th> 
 
\t \t \t </tr> 
 
\t \t </thead> 
 
\t \t <tbody> 
 
\t \t \t <tr ng-repeat="list in listdata" total-items="totalItems"> 
 
\t \t \t \t <td>{{list.name}}</td> 
 
\t \t \t \t <td ng-repeat="li in list.states">{{li.name}}</td> 
 
\t \t \t \t <td class="text-right"> 
 
\t \t \t \t </td> 
 
\t \t \t </tr> 
 
\t \t </tbody> 
 
\t </table> 
 
</div>
 
    
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
 

 

 
<script type="text/javascript"> 
 
\t angular.module('App', []) 
 
\t .controller('StatesController', function($scope) { 
 
\t \t var data = [ 
 
\t \t { 
 
\t \t \t "id": 1, 
 
\t \t \t "name": "Afghanistan", 
 
\t \t \t "sortname": "AF", 
 
\t \t \t "deleted_at": null, 
 
\t \t \t "created_at": null, 
 
\t \t \t "updated_at": "2017-01-28 06:36:56", 
 
\t \t \t "states": [ 
 
\t \t \t { 
 
\t \t \t \t "id": 42, 
 
\t \t \t \t "name": "Badakhshan", 
 
\t \t \t \t "country_id": 1, 
 
\t \t \t \t "deleted_at": null, 
 
\t \t \t \t "created_at": null, 
 
\t \t \t \t "updated_at": null 
 
\t \t \t }, 
 
\t \t \t { 
 
\t \t \t \t "id": 43, 
 
\t \t \t \t "name": "Badgis", 
 
\t \t \t \t "country_id": 1, 
 
\t \t \t \t "deleted_at": null, 
 
\t \t \t \t "created_at": null, 
 
\t \t \t \t "updated_at": null 
 
\t \t \t } 
 
\t \t \t ] 
 
\t \t }, 
 
\t \t { 
 
\t \t \t "id": 2, 
 
\t \t \t "name": "Algeria", 
 
\t \t \t "sortname": "AL", 
 
\t \t \t "deleted_at": null, 
 
\t \t \t "created_at": null, 
 
\t \t \t "updated_at": "2017-01-28 06:36:56", 
 
\t \t \t "states": [ 
 
\t \t \t { 
 
\t \t \t \t "id": 44, 
 
\t \t \t \t "name": "Badakhshan", 
 
\t \t \t \t "country_id": 2, 
 
\t \t \t \t "deleted_at": null, 
 
\t \t \t \t "created_at": null, 
 
\t \t \t \t "updated_at": null 
 
\t \t \t } 
 
\t \t \t ] 
 
\t \t }] 
 
\t \t $scope.listdata = data; 
 

 

 
\t }); 
 

 
\t
 
   
 
  
 
 

 

Answer 5

最簡單的我現在能想到的方式是：

<td>{{listdata.name}}</td> 
<td> 
    <span ng-repeat="state in listdata.states"> 
     {{state.name}}<span ng-if="$index<listdata.states.length">, </span> 
    </span> 
</td> 

Answer 6

<div ng-controller="StatesController as vm"> 

<table class="table table-hover dataTable" id="table-editable"> 
       <thead> 
        <tr> 
         <th>Country name</th> 
         <th>State name</th> 
         <th class="text-right">Action</th> 
        </tr> 
       </thead> 
       <tbody> 
        <tr dir-paginate="listdata in vm.listdata | itemsPerPage:10" total-items="vm.totalItems"> 
         <td>{{listdata.name}}</td> 
         <td><div ng-repeat="state in listdata.states"><span>{{state.name}}</span></div></td> 
         <td class="text-right"> 
          <a class="edit btn btn-sm btn-default" data-toggle="modal" ng-click="vm.edit(listdata.id,$index)" data-target="#addNew"> 
           <i class="icon-note"></i> 
          </a> 
          <a class="delete btn btn-sm btn-danger" ng-click="vm.remove(listdata.id,$index)"> 
           <i class="icons-office-52"></i> 
          </a> 
         </td> 
        </tr> 
       </tbody> 
      </table>