首页 > 代码库 > angular学习(三):ng渲染案例用法总结

angular学习(三):ng渲染案例用法总结

2024-08-03 03:49:48   218人阅读

前两篇把基本的架子都搭好了,在单独的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=http://www.mamicode.com/"ios" ng-model="sys_type"ng-change="changeRole()">

说明:

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=http://www.mamicode.com/"{{curimage}}" style="max-width:500px;"/>

              说明:

                            该code用ng-src绑定了一个scope对象,为img的对象

总结

              到了这里最后说一下自己的理解吧。因为html中组件有相应的事件，加上NG之后又怎么就升级了。这是因为controller中的对象值被更改,相应的页面上的效果也就更改。也就是我们所谓的双向绑定。通过这种方式不用通过js再次渲染DOM。

angular学习(三):ng渲染案例用法总结


联系
我们