0

I have two different table templates. I keep the visibility of the table using ng-show='template == 1' directive in first table and ng-show='template == 2'inside the second table. I set the template to either 1 or 2 on the controller. I build the rows as ng-repeat = "det in $root.tradedetails" in both the tables and assign the json to the tradedetails from the controller. Can I use the same rootscope variable $root.tradedetails for the both the table template. For example, if I want to iterate the first table, I will set the template = 1 and assign the details to $root.tradedetails. It will automatically set the display of second table to none. I want to know whether the ng-repeat inside the second table iterate over the $root.tradedetails.

Vijay VSTO
  • 133
  • 1
  • 4
  • 15

1 Answers1

0

The simple answer is yes - you can have multiple ng-repeats iterating over the same collection.

All ng-show does is add a css class of ng-hide to the elements where the result of the ng-show expression is false. This hides the element, but it is still present in the DOM.

So with the set up you have described, you would have two tables in the DOM, both with content from $rootscope.tradedetails, and they would be shown/hidden based on the value of $scope.template.

Matthew de Nobrega
  • 306
  • 1
  • 10
  • Thanks for the immediate reply. I have one more query. If the visibility of the second table is set to false, will the ng-repeat execute for the second table. i.e., if I use the same collection both the tables, whether the ng-repeat will execute for the both the tables or only for the table whose visibility is true. If it execute both the tables every time, it will be performance issue, right? – Vijay VSTO May 25 '15 at 17:05
  • Using n-show will execute for both tables - but the one will be hidden. If you need to toggle quickly between the tables and you have less than, say, 300 rows in each table then using ng-show is the best option and performance should be fine. If you have more rows than that, then you can use ng-if instead of ng-show - this will only iterate over the visible table. The downside here is that switching between the tables will be slower. – Matthew de Nobrega May 25 '15 at 17:18
  • It will contain more than 300 rows. Where or how should I use the ng-if? – Vijay VSTO May 25 '15 at 17:23
  • In general having 300 rows in a UI is pretty high and you should think about pagination or some other form of filtering, but if there's a good reason to have all that data displayed to the user then, to use ng-if, you just replace the ng-show attributes with ng-if (with the same condition). That's the only change. They perform similar roles, but ng-show hides an element if its test fails, where ng-if removes it from the DOM. – Matthew de Nobrega May 25 '15 at 19:25