Angular Study (iii): NG Rendering Case Usage Summary

The first two of the basic shelves have been set up, in a separate controller to deal with the independent business, the rendering of the corresponding page is to use the corresponding components and events NG provided, the following I use a list of ways to summarize this knowledge:

Ng-click:

Case

<button type= "button" class= "btn btn-primary" ng-click= "Showuploadview ()" > click Upload </button>

Description

Declares a BTN Click event that declares the function as $scope in the corresponding controller. Showuploadview = function () {}

ng-options:

Case

<select class= "Form-control" ng-options= "m.id as m.name for M inselectobj" ng-model= "curobj. Type "ng-change=" Changetarget () "></select>

Description

The corresponding selectobj is defined in the corresponding controller in the following format

$scope. selectobj= [
                            {
                                          ID: "WebView",
                                          Name: "Introduction page"
                            },
                            {
                                          ID: "App",
                                          Name: "Advertisement"
                            }];

Declare the Select default drop-down value by Ng-model

The drop-down box is declared by Ng-change to trigger the function logic when the value is changed.

Ng-change:

Case:

<input type= "Radio" name= "ClientType" id= "InlineRadio1" value= "ios" ng-model= "Sys_type" ng-change= "Changerole ()" > <label>IOS</label>

Description

Radio selection changes the selected state with Ng-change and Ng-model will be the most recently selected values, with the ng-click words to get the value is changed before.

ng-repeat:

Case:

                            <tr ng-repeat= ' repeat inlist ' >
                                                        <td>{{repeat. Index}}</td>
                                                        <td>{{repeat. Title}}</td>
                             </tr>

Description:

The list is a variable in scope. and repeat in this way to traverse the object in the corresponding list, thus rendering each table

NG-SRC:

Case:

Description:

The code uses NG-SRC to bind a scope object to the IMG object

Summary

At the end of this, let's talk about your own understanding. Because the components in the HTML have corresponding events, plus ng after the upgrade. This is because the object value in the controller is changed and the effect on the corresponding page changes. That's what we call a two-way binding. In this way, the DOM is not rendered again by JS.