нг-повторить для создания многостраничного вложенной таблицы

Question

У меня есть таблица следующей структуры:

<table> 
    <thead> 
     <tr> 
      <th>Column 1</th> 
      <th>Column 2</th> 
      <th>Column 3</th> 
     </tr> 
    </thead> 
    <tbody ng-repeat="singleArray in groupOfArrays"> 
     <tr> 
      <td>{{calcTotalObj(singleArray).x}}</td> 
      <td>{{calcTotalObj(singleArray).y}}</td> 
      <td>{{calcTotalObj(singleArray).z}}</td> 
     </tr> 
     <tr ng-repeat="item in singleArray"> <!-- scope of item starts here --> 
      <td style='padding-left:30px;'>{{item.x}}</td> 
      <td>{{item.y}}</td> 
      <td>{{item.z}}</td> 
     </tr> <!-- scope of item ends here --> 
     <!-- here is where I want to add the row I describe below --> 
    </tbody> 
</table> 

(Примечание: Когда я говорю «вложенности» ниже, я не имею в виду гнездящихся в фактической " стол в таблице ", так как я хочу, чтобы это выглядело как ряды, совпадающие друг с другом, а не несколько таблиц друг с другом)

Однако мне нужно добавить дополнительный уровень вложенности ниже второй строки в tbody. Я не думаю, что есть какой-либо HTML, что разрешено, а просто добавив еще одну строку вида:

<tr ng-repeat="nest in item"> 
    <td style='padding=left:50px'> 
........ 
</tr> 

не работает, потому что я уже в предыдущей строке не использовать переменную item петли ,

Как добавить этот дополнительный уровень гнездования? Или мне нужно реструктурировать?

РЕДАКТИРОВАТЬ: Структура groupOfArrays

groupOfArrays = 
{ array[ 
    obj = { x=1,y=2, z=4 } 
    ,obj2 = { x=3, y=6, z=8 } 
    ,obj3 = { x=5, y=9, z=3 } 
    ] 
} 

Так calcTotalObj() (который Я понимаю, что осталось, прежде чем) будет вычислять общую сложность значения во внутренних объектах (скажем, x, в приведенном выше примере). Он будет возвращать объект того же типа, но с указанными значениями. Вторая строка будет разверткой указанной строки и будет повторяться для всех значений в groupOfArrays. Строка, которую я хочу добавить, будет дополнительной разверткой.

Answer 1

Вы можете использовать ng-repeat-start, ng-repeat-end основной образец ниже

var app = angular.module('app', []); 
 

 
app.controller('homeCtrl', function ($scope) { 
 

 

 
    $scope.data = [{ 
 
     id: "1a", 
 
     name: "apple" 
 
    }, { 
 
     id: "2a", 
 
     name: "pear" 
 
    }, { 
 
     id: "3a", 
 
     name: "banana" 
 
    }]; 
 

 
    
 
    
 

 

 

 

 
});

tr.border_bottom td { 
 
    border-bottom:1pt solid black; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<div ng-app="app"> 
 
    <div ng-controller="homeCtrl"> 
 
     
 
     <table> 
 
     <tr ng-repeat-start="item in data" class="border_bottom"><td>{{$index}}</td><td>{{item.id}}</td></tr> 
 
     <tr ng-repeat-end class="border_bottom"><td></td><td>{{item.name}}</td></tr> 
 
     </table> 
 

 

 
    
 
     
 
     
 
    </div> 
 
    </div>