Angular native commands used to control the display of elements _ AngularJS

This article mainly introduces the usage and differences of native commands used by Angular to control the display of elements, we recommend these commands in Angular native commands to control the display of elements, ng-show/ng-hide/ng-if and ng-switch.

Angular performance optimization is often used.

Let's take a look at their differences.

Ng-show is the same as ng-hide, but ng-show is displayed when conditions are met, while ng-hide is hidden when conditions are met. ng-hide is not mentioned below.

Ng-show
A boolean value received by ng-show. If it is set to true, the DOM node is displayed. When the value of ng-show is false, A ng-hide class is added to the DOM node. The expression of this class is "display: none ". All nodes in ng-show are loaded during DOM load. That is to say, ng-show is only a shadow and DOM node. That means if there are too many ng-show commands, even if they are not displayed, their DOM nodes 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 is destroyed, even if this node contains a lot of ng bindings, it will not be executed. Therefore, in project development, if there is no need to load the dom at once, ng-if can be used to prevent the occurrence of ng events, thus speeding up dom loading. Especially in repeat, each piece of data contains a complex data structure, which is particularly effective. When its value is true, a DOM node is created.

Therefore, if you use commands and templates to render additional information, such as clicking to display details of list items, you must use ng-if (AngularJSv. 1.1.5 or later ). It can block 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 a traditional method to create a tab. We need to repeat the current status again and then execute the corresponding tasks. Using ng-switch in angular is very simple. Ng-switch must first listen to a variable. What is displayed below when the variable value is used. As shown in the preceding figure, when the value of type is 'aaa', this region is created and displayed; when the value of type is equal to 'bbb', all the previously 'aaa' dom will be destroyed, and all the 'bbb' dom will be created and displayed.

Example http://jsbin.com/hinehi/1/edit