<tr><td> 使用 AngularJS 的多级重复

Question

我真的很难使用 AngularJS 来实现它。 以下是预期的输出。

                          child1-1
           child1[+][-]
                          child1-2

父[+][-]

           child2[+][-]

只要点击父母的 [+]，就会显示 child1 和 child2。 如果单击 child1 的 [+]，则会显示其子 child1-1 和 child1-2。

我真的不知道在第 3 级该做什么。

Answer 1

每个拥有孩子的对象都可以有自己的布尔值来描述其孩子是否可见。然后在ng-click 上，您可以切换该布尔值，并使用ng-class 显示其子级。

Plunker

编辑：Bonus, recursive Plunker 基于this Plunker

HTML

<table>
  <tr ng-repeat="parent in nested">
    <td>
      <strong
        ng-click="toggleChildren( parent )"
        ng-class="{ hasChildren: parent.children.length, plus:parent.toggled }">
        {{ parent.title }}
      </strong>
      <ul ng-class="{ noShow: !parent.toggled }">
        <li ng-repeat="child in parent.children">
          <strong
            ng-click="toggleChildren( child )"
            ng-class="{ hasChildren: child.children.length, plus: child.toggled }">
            {{ child.title }}
          </strong>
          <ul ng-class="{ noShow: !child.toggled }">
            <li ng-repeat="grandchild in child.children">
              <strong>{{ grandchild.title }}</strong>
            </li>
          </ul>
        </li>
      </ul>            
    </td>
  </tr>
</table>

CSS

  .noShow{display:none}
  .hasChildren:after{content:'+'}
  .hasChildren.plus:after{content:'-'}

JS

    $scope.toggleChildren = function( scope )
    {
      scope.toggled = !scope.toggled;
    }

关于标签的PS：“java”是“javascript”，因为“car”是“carpet”；我认为您的问题与前者无关。