AngularJS和DOM Elements注入

Question

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: http://i.stack.imgur.com/rvk5L.jpg

Answer 1

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

Answer 2

单击菜单项时使用ngIf而不是ngShow ，在这种情况下html根本不会呈现（当然，当表达式为false时）