javascript - Run ng-repeat on-click (when ng-show is true)? -

javascript - Run ng-repeat on-click (when ng-show is true)? -

i have table populating ng-repeat. table has 100 rows, if click on row new table show up, (with ng-show) more deep description of product. ng-repeat slow , generating 101 table on-load of page, , slowing downwards performance of web-app. there way, using angular (without external libraries), run ng-repeat when user clicks on row (ng-show true)?

note: every hidden table unique.

here html table:

<tbody> <tr ng-repeat-start="car in sortedcarlist" ng-click="showtable(car)"> <td><a target="_blank" href="{{car.carlink}}">{{car.name}}</a></td> <td>{{car.review}}</td> <td>{{car.rating}}</td> <td>{{car.fivestarpercent}}</td> <td>{{car.recommended}}</td> <td>{{car.price}}</td> </tr> <tr ng-repeat-end ng-show="modelrow.activerow==car.name && showdetails && car.allreviews.length!=0" class="hidden-table"> <td colspan="6"> <table class="table table-striped table-bordered table-condensed table-hover"> <thead> <tr> <th>year</th> <th>reviews</th> <th>rating <span class="fivestar">/5</span></th> <th>recommended</th> <th>reliability rating</th> <th>performance rating</th> <th>running costs rating</th> </tr> </thead> <tbody ng-repeat="rev in car.allreviews"> ....

try using ng-if rather ng-show toggle nested tables. should delay ng-repeat in nested table happen until it's shown.

javascript html angularjs ng-repeat