Show / Hide Nested Divs inside ng-repeat

Question

I have a div with sub divs to create a nested grid system. There are three levels in total:

1. MainDiv - Always Visible
2. SecondDiv - Show or hide when clicked on MainDiv

3. ThirdDiv - Show or hide when clicked on 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> 

Now I need to add a click event on the div to show hide the necessary nested divs.

Plunker: http://plnkr.co/z3RiV6cDFC6YjrbuqxN9

Answer 1

Generic example using ng-init and 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>