I set up a div with sub divs to establish a nested grid system. There are three levels altogether:
- MainDiv - Always Visible
- SecondDiv - Display or conceal when MainDiv is clicked on
ThirdDiv - Display or conceal when SecondDiv is clicked on
<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}} - Click here for more details </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}}) - Click here for more details </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 want to include a click event on the div to toggle the display of the necessary nested divs.
Plunker: http://plnkr.co/z3RiV6cDFC6YjrbuqxN9