CODEWITHSUNDEEP
javascriptangularjsdom
Shai
Shai

Reputation: 77

AngularJS and DOM Elements injections

Please forgive me for the title, I didn't know exactly how to describe it.

I'm new to AngularJS and I wanted to ask for your advice on how to create something.

I've a list that I'm drawing with ngRepeat. When you click on each list item, a collapsing menu opens. This menu is the same for all elements of the list. At the moment, my ngRepeat draws this menu to each and every list item and shows it only if the corresponding list item was clicked. So if my list has 50 items, I'm drawing the menu 50 times! This is 49 times more than I really need.

If I was to do this with jQuery, I'd just create the menu and change its location on the dom. How can I do this the Angular way?

Example image of how the list looks like, the gray item is the menu with its action. Looks the same for all items and call the same functions but with different parameters: https://i.sstatic.net/rvk5L.jpg

Upvotes: 1

Views: 90

Answers (2)

guru
guru

Reputation: 4022

I guess in these type of cases ng-if will be a better option as this will create the dom based on the condition rather than showing/hiding already created elements as in the case of ng-show.

From docs:

The ngIf directive removes or recreates a portion of the DOM tree based on an {expression}. If the expression assigned to ngIf evaluates to a false value then the element is removed from the DOM, otherwise a clone of the element is reinserted into the DOM.

Here is a demo: http://plnkr.co/edit/Ro9LOB4f81LT32mGMyij?p=preview

Upvotes: 1

karaxuna
karaxuna

Reputation: 26940

Use ngIf instead of ngShow when clicking on menu item, in this case html will not render at all (when expression is false of course)

Upvotes: 0

Related Questions