10-dom operation and instruction extension operations

Next look at the ODM display and hide.

<div ng-controller= "Aaa" >    <input type= "checkbox" ng-model= "flag"/>    <div ng-show= "Flag" > xiecg1</div>    <div ng-hide= "flag" >xiecg2</div>    <div ng-If= "Flag" >xiecg3 </div></div><script type= "Text/javascript" >    var m1 = Angular.module (' myApp ', []) ;    M1.controller (' Aaa ', [' $scope ',function($scope) {        true;    }]); </script>

Ng-show: Whether it is displayed (Display:block;)

Ng-hide: whether hidden (display:none;)

Ng-if: Whether to render this DOM element (Dom additions and deletions)

We use input to control the value of flag, which affects DOM elements when the flag value changes. The biggest difference between ng-if and ng-show/hide is that the element is displayed and hidden, and one is added and deleted.

In addition, there are ng-switch.

<div ng-controller= "Aaa" >    <input type= "checkbox" ng-model= "flag"/>    <div ng-Switch on= "Flag" >        <p ng-switch-default > Effect </p>        <p ng-switch-when = "false" > selected effects </p>    </div></div><script type= "Text/javascript" >    var m1 = Angular.module (' myApp ', []);    M1.controller (' Aaa ', [' $scope ',function($scope) {        true;    }]); </script>

There are two effects, default and toggle. There is an on command on their parent that binds the flag data to true. So the first is the default state.

Click Input,flag to False, the state of the switch, if the controller is initialized is false, the beginning is the state of change.

There is also an open

    <details ng-open= "true" >        <summary>name</summary>        <p>xiecg</p>    </ Details>

Expansion and contraction, belonging to a HTML5 element, this is not much to say.

The following continues the other instructions angular.

1:ng-init

<div ng-controller= "Aaa" >    <p ng-init= "text= ' Hello '" >{{text}}</p></div><script type = "Text/javascript" >    var m1 = Angular.module (' myApp ', []);    M1.controller (' Aaa ', [' $scope ',function($scope) {        //$scope. Text= ' Xiecg ';    }]); </script>

In addition to initializing values on the controller, you can also use Init's initial values directly on DOM elements.

It is usually better to initialize the value on the controller, so that the structure is clear. When does init use better? See Example:

<div ng-controller= "Aaa" >    <div ng-repeat= "Arrouter in arr" ng-init= "outerindex= $index" >        <p Ng-repeat= "Arrinner in Arrouter" ng-init= "innerindex= $index" >            {{Arrinner}}:{{outerindex}} {{Innerindex} }        </p>    </div></div><script type= "Text/javascript" >    var m1 = Angular.module (' myApp ', []);    M1.controller (' Aaa ', [' $scope ',function($scope) {        = [[' A ', ' B '],[' C ', ' d ']];    }]); </script>

Use init to get the traversed data index.

2:ng-include

<div ng-controller= "Aaa" >    <div ng-include= "' temp.html '" ></div></div>

The introduction of template files, in fact, is Ajax, need to run on the server.

3:ng-model

Several previous articles have specifically introduced the use of Ng-model, let's look at the extension.

<div ng-controller= "Aaa" >    <input type= "text" ng-model= "text" ng-model-options= "{updateon: ' Blur '}" >    <div>{{text}}</div></div><script type= "Text/javascript" >    var m1 = Angular.module (' myApp ', []);    M1.controller (' Aaa ', [' $scope ',function($scope) {        $scope. Text= ' Xiecg ';    }]); </script>

When we enter the form, we do not update the data on the view in a timely manner, and use Updateon to blur when the cursor is left to update the data.

4:ng-controller

The previous examples are in this format:

<div ng-controller= "Aaa" >{{text}}</div><script type= "Text/javascript" >    var m1 = Angular.module (' myApp ', []);    M1.controller (' Aaa ', [' $scope ',function($scope) {        $scope. Text= ' Xiecg ';    }]); </script>

But if our projects are getting bigger, we have more ways to choose:

 <div ng-controller= "fnaaa as A1" > <p>{{text}}</p> <div>{{a1.text}}:{{a1.show ()}}</d Iv></div><script type= "Text/javascript" > var  m1 =    Angular.module (' myApp ' ,[]);    M1.controller ( ' Aaa ', [' $scope ' ,fnaaa]);  function   Fnaaa ($scope) {$scope. Text 
    = ' Hello ' ;    $scope. arr  = [[' A ', ' B '],[' C ', ' d '  = 53; FnAaa.prototype.show  = function   () {
      return  show '  = ' HELLO ' ;  </script> 

is not very familiar, we can use the prototype object, using as to get the prototype object.

Learn notes, if there is insufficient, please correct me! Reproduced please keep the original link, thank you.

Finally, the micro-Bo powder, thank you.

10-dom operation and instruction extension operations