angular学习(三):ng渲染案例用法总结
来源:互联网 发布:win32 界面编程 编辑:程序博客网 时间:2024/04/28 01:35
前两篇把基本的架子都搭好了,在单独的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。
- angular学习(三):ng渲染案例用法总结
- Angular ng 学习
- angular指令监听ng-repeat渲染完成
- 【Angular】ng-disabled的用法;
- Angular.js之ng-options用法
- Angular - ng-repeat 一些高级用法
- angular js ng-change的用法
- angular学习日志07 ng-repeat
- angular学习日志08 ng-show ng-hide
- Angular ng-book2学习关于Angular-cli环境安装
- angular学习总结四——路由的用法
- angular学习总结六——管道的用法
- angular学习总结三——组件的编写
- ng-click得到当前元素,angular.element()用法
- angular js Select标签中的ng-options用法
- angular的对话框插件-ng-dialog的用法
- angular学习之——ng-show/ng-hide与ng-if的区
- angular-flot学习总结
- C++中实现回调机制的几种方式
- SysTick
- 分布式存储系统
- VC中调用和运行其它应用程序(比如使用cmd.exe的功能)
- iOS mac终端下的SQL语句
- angular学习(三):ng渲染案例用法总结
- 数据库水平拆分和垂直拆分区别(以mysql为例)
- 自己所做的项目的结构划分,理清结构
- Unity3D与Android项目交互中无法监听back键返回的解决办法
- 不同方案之间的数据对象授权
- Codeforces Round #277.5 (Div. 2) 解题报告
- MD5加密关键代码
- 在Ubuntu上移植MPlayer到mini2440
- Win7 32bit下hadoop2.5.1源码编译与平台搭建中遇到的各种错误