Мне нужно сделать это:
<tbody>
<tr class="object.sibling[0]">
<tr class="object.sibling[1]">
<tr class="object.sibling[2]">
<tr class="object.sibling[2].child">
<tr class="object.sibling[2].child">
<tr class="object.sibling[3]">
<tr class="object.sibling[4]">
однако я не уверен, как отслеживать две циклы, которые являются братьями и сестрами. Я легко могу это сделать:
<tbody>
<tr class="object.sibling[0]">
<tr class="object.sibling[1]">
<tr class="object.sibling[2]">
<tr class="object.sibling[3]">
<tr class="object.sibling[4]">
<tr class="object.sibling[2].child">
<tr class="object.sibling[2].child">
но тогда строки не соответствуют порядку.
Я нашел решение, которое, похоже, работает с использованием ng-repeat-start и ng-repeat-end, который визуально делает то, что я хочу, но лишние пустые строки, необходимые для завершения циклов запуска hg-repeat, испортили таблицу, когда пользователи копируют пасту.
<tbody>
<tr ng-repeat-start="x in object.sibling">
<td class="x">
<tr ng-repeat-start="y in x.child">
<td class="Y">
<tr ng-repeat-end="">
<tr ng-repeat-end="">
Проблема в том, что trs, хотя они могут представлять детей братьев и сестер, должны быть на одном уровне, как если бы это все синглы. Я не могу понять, как это сделать с угловым 1.2.15. Как запустить два цикла, которые отслеживают друг друга, которые не вложены?
Хм, интересный сценарий у вас есть. Это должно работать:
<tr ng-repeat-start="sibling in siblings"></tr>
<tr ng-repeat-end ng-repeat="child in sibling.children"></tr>
Идея состоит в том, чтобы повторить две строки для каждого брата, но вторая строка каждого брата фактически повторяется для всех детей-близнецов. Таким образом, на практике вторая строка будет отображаться (и повторяться), если у брата есть дети.
Вот полный пример:
var app = angular.module('app', []);
app.controller('MainCtrl', function($scope) {
$scope.siblings = [
{
children: [
{}, {}, {}
]
},
{},
{
children: [
{}, {}
]
}
];
});
<div ng-app="app">
<table ng-controller="MainCtrl">
<tr ng-repeat-start="sibling in siblings">
<td>Sibling {{$index}}</td>
</tr>
<tr ng-repeat-end ng-repeat="child in sibling.children">
<td>Sibling child {{$index}}</td>
</tr>
</table>
</div>
<script src="/angular.min.js"></script>
Обратите внимание, что нет дополнительных элементов <tr>
.