Angularjs's Learning--ng-show/ng-hide/ng-if and Ng-switch

In angular's native instructions, these commands are used to control the display of elements, ng-show/ng-hide/ng-if, and Ng-switch.

It is also often used in angular performance optimization.

Let's look at the difference between them.

Where Ng-show and Ng-hide are the same, but Ng-show is to meet the conditions on display, Ng-hide is to meet the conditions on the hidden, the following is no longer mentioned ng-hide.

Ng-show

The ng-show receives a bool value, which is triggered to show the DOM node when it is true. When the value of Ng-show is false, a class of ng-hide is added to the DOM node, and the expression for this class is "Display:none". All the nodes in the ng-show are loaded when the DOM is load. In other words, Ng-show is just a shadow and shows the DOM node. It also means that if the oil is too many ng-show instructions, even if they do not display, but their DOM node 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 the node contains a lot of Ng's bindings will not be executed. Therefore, in the development of the project, if there is no need to load the DOM at once, the ng-if can be used to prevent the NG event from occurring, thus speeding up the loading speed of the DOM. Especially when repeat, each data contains complex data structure when the effect is particularly obvious. When the value is true, the DOM node is created.

so if you use instructions, templates to render additional information, such as clicking to display the details of a list item, be sure to use Ng-if (ANGULARJSV. 1.1.5 later). It blocks rendering (compared to ng-show).

Ng-switch

The existence of Ng-switch, let us save a lot of trouble (should say angular itself so). For example, we used the traditional way to do a tab tab. We need to loop over and over again and then do the right thing at the end of the current state. It's very easy to use ng-switch in angular. Ng-switch to listen to a variable first, what is displayed below when the variable is a value. As shown above, listen to the type of a variable, when the value of type equals ' AAA ', this area will be created and displayed; When the value of type equals ' BBB ', the DOM of the previous ' AAA ' will be destroyed and then ' BBB ' The DOM is all created and displayed.

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

Angularjs's Learning--ng-show/ng-hide/ng-if and Ng-switch