Question

我真的很难用AngularJS来实现它。以下是预期产量。

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

父[+] [ - ]

           child2[+][-]

每当点击父亲[+]时，都会显示child1和child2。如果点击了child1＆＃39; [+]，将显示其子项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：＆＃34; java＆＃34;是＆＃34; javascript＆＃34; as＆＃34; car＆＃34;是地毯＆＃34;地毯＆＃34 ;;我不认为你的问题与前者有关。

使用AngularJS的多级重复

1 个答案: