Angular Learning (III): ng rendering case usage summary, angularng

Angular Learning (III): ng rendering case usage summary, angularng

The first two articles set up the basic architecture and process independent services in a separate Controller. In this case, the corresponding components and events provided by ng are used to render the corresponding pages, I will summarize this knowledge in the following way:

Ng-click:

Case

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

Description

Declares a btn click event. The function declared in the corresponding controller is $ scope. 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>

Note:

The corresponding selectobj is defined in the corresponding controller as follows:

$ Scope. selectobj = [{id: "webview", name: "" },{ id: "app", name: ""}];

Use ng-model to declare the default drop-down value of the select statement.

Use ng-change to declare that the function logic is triggered when the value of the drop-down box is changed.

Ng-change:

Case:

<input type="radio" name="clientType"id="inlineRadio1" value="ios" ng-model="sys_type"ng-change="changeRole()"> <label>IOS</label>

Note:

Use ng-change and ng-model to change the selected status of radio. The value obtained after ng-click is changed.

Ng-repeat:

Case:

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

Note:

List is the variable in scope, and repeat in this way to traverse the objects in the corresponding list, so as to render every table

Ng-src:

Case:

Note:

This code binds a scope object with ng-src, which is an img object.

Summary

At the end of this article, let's talk about your understanding. Because html components have corresponding events, how can I upgrade them after NG is added. This is because the object Value in the controller is changed, and the effect on the corresponding page is changed. This is what we call bidirectional binding. In this way, you do not need to use js to render the DOM again.