前两篇把基本的架子都搭好了,在单独的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。
时间: 2024-10-09 15:26:03