在ng-repeat中显示/隐藏嵌套divs

Question

我有一个div div divs创建一个嵌套网格系统。 有三个层次总数：

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。

Plunker：http://plnkr.co/z3RiV6cDFC6YjrbuqxN9

Answer 1

使用NG-INIT和NG单击通用示例：

<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>