In Angular's native instructions, these instructions are used to control whether elements are displayed or not, ng-show/ng-hide/ng-if and ng-switch.
We also often use it in angular performance optimization.
Let's look at their differences.
Among them, ng-show and ng-hide are the same, except that ng-show displays the conditions when they meet, and ng-hide hides the conditions when they meet. We will not mention ng-hide below.
ng-show
A bool value received by ng-show will be triggered to display the DOM node when true. When the value of ng-show is false, a class of ng-hide is added to the DOM node, and the expression of this class is "display:none". When DOM loads, all nodes in ng-show will be loaded. That is to say, ng-show only hides and displays the DOM node. This means that if there is too much oil in the ng-show instruction, even if they do not display it, the DOM node they are in will still be rendered.
ng-if
ng-if also receives a bool value. When its value is false, the node it controls is not created or the previous DOM node will be destroyed. Even if this node contains a lot of ng bindings, it will not be executed. Therefore, in project development, if we do not need to load the dom at once, we can use ng-if to prevent the ng event from happening, thus speeding up the loading speed of the dom. Especially when repeating, the effect is particularly obvious when each piece of data contains complex data structures. When its value is true, a DOM node will be created.
So if you use instructions and templates to render additional information, such as clicking to display the detailed information of the list item, be sure to use ng-if (AngularJSv. 1.1.5 and later). It blocks rendering (compared to ng-show).
ng-switch
The existence of ng-switch saves us a lot of trouble (it should be said that angular itself is like this). For example, we used the traditional way to create a tab tab. We need to loop again and again and then judge the current state and then execute the corresponding things. Using ng-switch in angular is very simple. ng-switch must first listen to a certain variable, and what content will be displayed below when the variable is valued. As shown above, when listening to a variable like type, when the value of type is equal to 'aaa', this area will be created and displayed; when the value of type is equal to 'bbb', all the doms of the previous 'aaa' will be destroyed, and then all the 'bbb'doms will be created and displayed.
Example http://jsbin.com/hinehi/1/edit