显示/隐藏ng-repeat中的嵌套Divs

Question

我有一个带有子div的div来创建嵌套的网格系统。 共有三个级别：

1. MainDiv-始终可见
2. SecondDiv-单击MainDiv时显示或隐藏

3. ThirdDiv-单击SecondDiv时显示或隐藏

    <div class="container padding" style="background-color: #fff;" ng-controller="MyCtrl"> <div class="row"> <div class="col col-75" > Department / Product Type </div> <div class="col col-25"> Qty </div> </div> <div ng-repeat="item in departments | orderBy:'-qty'" style="padding:0px;margin: 0;"> <div class="row" ng-class-odd="'odd'" ng-class-even="'even'"> <div class="col col-75" style="padding:0;margin:0;"> {{item.departmentName}} - {{item.productTypeName}} - Need Click here </div> <div class="col col-25" align="center" valign="middle" style="font-size: 14px;font-weight:bold;padding:0;margin:0;"> {{item.qty}} </div> </div> <div ng-repeat="style in item.styles" style="padding:0;margin: 0;"> <div class="row"> <div class="col" style="margin-left: 5% !important;border-top-width:0;border-bottom-width:0;"> {{style.styleNum}} ({{style.qty}}) - Need Click here </div> </div> <div class="row" ng-attr-id="{{ 'level-2-' + $index }}"> <div class="col col-5" style="border:0"></div> <div class="col col-5" style="border-left:0;border-bottom:0;border-right:0;"></div> <div class="col col-25">Color</div> <div class="col col-25">Size</div> <div class="col">Product#</div> </div> <div ng-repeat="styleLine in style.details"> <div class="row"> <div class="col col-10" style="border:0;"></div> <div class="col col-25">{{styleLine.color}}</div> <div class="col col-25">{{styleLine.size}}</div> <div class="col">{{styleLine.productNum}}</div> </div> </div> </div> </div> </div> 

现在，我需要在div上添加一个click事件，以显示隐藏必要的嵌套div。

柱塞： http ：//plnkr.co/z3RiV6cDFC6YjrbuqxN9

Answer 1

使用ng-init和ng-click的通用示例：

<div ng-repeat="obj in items" ng-init="show = false">
    <div ng-click="show = !show"></div>
    <div ng-repeat="sub in obj.children" ng-show="show">
        <p>Hello World!</p>
    </div>
</div>