Angular--Ngif, Ngswitch, nghide/ngshow

In the combination of these NG instructions written in an article, there is basically a rule, the Beast will function similar to the same kind of most of the group together to facilitate understanding and memory.

This three instructions are also the operation of the DOM elements, the page display/hide the judgment, add/Remove the judgment.

Ngif

The ngif instruction adds to/removes the DOM tree from the Boolean value returned by the specified expression.

format : ng-if= "Value"

Value: The expression returned the result to a Boolean type.

Using code:

  <Type= "button" value= "Show/hide" Ng-click<ng-if= "Show">hello World</div>           

Here's a show/hide effect for the div where Hello World is located. But if you open the Browser development tool to review the elements, you will find that the div is removed and added, leaving only a comment "<!--ngif:show--" where the div is located. This need to make a distinction with the following ngshow/nghide. This means that the operation of this instruction on the DOM is removed/added into the DOM tree.

Ngswitch

The ngswitch instruction toggles the DOM structure conditionally on the template based on the result of the expression. elements that use Ngswitch instead of ngswitchwhen or ngswitchdefault instructions will be saved in the template.

format : ng-switch on= "expression" Ng-switch-default ng-switch-when= "value"

Expression: Returns a Boolean value that determines whether the condition is true.

Value: Set the condition

Using code:

  <DivNg-app= "Demo"><DivNg-controller= "Testctrl as CTRL"><SelectNg-model= "Ctrl.tpl"Ng-options= "I for I in Ctrl.select"><OptionValue= "0"> Please select a template</Option></Select><DivNg-switch on= "Ctrl.tpl"><PNg-switch-default>tpl-one</P><Png-switch-when= "Tpl-two" >tpl-two</p< Span style= "color: #0000ff;" >> <p = "Tpl-three" >tpl-three</p> </< Span style= "color: #800000;" >div> </div< Span style= "color: #0000ff;" >> </div>  

  (function () {    angular.module ("Demo", [])    . Controller ("Testctrl", Testctrl);    functionthis; vm.select = ["Tpl-one", "Tpl-two", "Tpl-three" ]; vm.tpl = Vm.select[0];};} ());

Ngswitch adds the corresponding content to the written HTML location depending on whether the expression is formed, and this position is a comment when the expression is false: "<!--ngswitchwhen:tpl-two---". This is the location of the second template binding, and when the expression satisfies the condition of the second template, it is replaced by the HTML of the second template and displayed to the page.

Nghide/ngshow

The Nghide/ngshow directive shows or hides the specified THML element. The display hiding of an element is implemented by adding a delete based on the ng-hide CSS style on the element.

format : ng-hide= "value" ng-show= "value"

Value: The expression result is of type Boolean.

Using code:

   <InputType= "button"  Value= "Show /hide " Ng-click=" show =!show; "/> <div ng-show = "show" >hello< /div> <div ng-hide= "show" </div                 

Ngshow and Nghide are the opposite. Here is the ng-hide CSS style written below:

   . ng-hide {     /& #42; just another form of hiding an element & #42;/     display: block!important;< c7>     Position: absolute; top: -9999px; left : -9999px;}       

Rare weekend, again spit Groove six days a week on the class really really good tired ....  Tomorrow can sleep more, then you will write an article ~ haha next post written on the Ng-xxx class, the rest are many, the learning process is also very slow ... To now write the entire custom directive and some method functions of the cache service and scope

Angular--Ngif, Ngswitch, nghide/ngshow