javascript - Angular 1.2.15 运行并发循环

Question

我需要这样做:

<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 start 循环所需的额外空行会弄乱表格复制粘贴。

<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=“”>

问题是，尽管 tr 可能代表 sibling 的 child ，但它们必须处于同一级别，就好像它们都是 sibling 一样。我不知道如何使用 Angular 1.2.15 来做到这一点。如何运行两个不嵌套的循环来相互跟踪？

Answer 1

嗯，你的场景很有趣。这应该有效:

<tr ng-repeat-start="sibling in siblings"></tr>
<tr ng-repeat-end ng-repeat="child in sibling.children"></tr>

这个想法是为每个同级重复两行，但每个同级的第二行实际上是为该同级的所有子级重复。因此，实际上，只有当 sibling 确实有 child 时，第二行才会显示(并重复)。

这是一个完整的示例:

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="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>

注意没有多余的<tr>元素。