angular學習(三):ng渲染案例用法總結

前兩篇把基本的架子都搭好了,在單獨的Controller中處理獨立的業務,這時候渲染相應的頁面就要用到ng提供的相應組件和事件,下面我採用一一列舉的方式,將這些知識都總結於此:

ng-click:

              案例

 <button type="button"class="btn btn-primary" ng-click="showUploadView()">點擊上傳</button>

              說明

              聲明了一個btn的click事件，對應的controller中聲明function為 $scope.showUploadView = function(){}

ng-options:

              案例

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

              說明:

              在對應的controller中定義了相應的selectobj為以下格式

 $scope.selectobj= [                            {                                          id :"webview",                                          name :"介紹頁"                            },                            {                                          id :"app",                                          name :"通告"                            }];

              通過ng-model來聲明該select預設下拉值

              通過ng-change來聲明該下拉框在改變值的時候觸發function邏輯

ng-change：

              案例:

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

說明:

radio的選擇改變選中狀態用ng-change和ng-model將會得到最新選的值，用ng-click的話得到的值是改變之前的。

ng-repeat:

                案例：

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

說明:

list為scope中的變數.而repeat in 這種方式來遍曆相應list中的對象,從而實現渲染每一個table

ng-src:

              案例:                    

                             <img ng-src="{{curimage}}" style="max-width:500px;"/>

              說明:

                            該code用ng-src綁定了一個scope對象,為img的對象

總結

              到了這裡最後說一下自己的理解吧。因為html中組件有相應的事件，加上NG之後又怎麼就升級了。這是因為controller中的對象值被更改,相應的頁面上的效果也就更改。也就是我們所謂的雙向繫結。通過這種方式不用通過js再次渲染DOM。