ng 双向数据绑定 实现 注册协议效果
效果：
代码：
<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
<meta charset="UTF-8">
<script src="js/angular.js"></script>
<title></title>
</head>
<body>
<div ng-controller="myCtrl">
<input type="checkbox" ng-model="isAgree"/>是否同意
<button ng-disabled="!isAgree">注册</button> <!--<select ng-model="imgUrl">
<option value="1.jpg">水仙花</option>
<option value="2.jpg">郁金香</option>
</select> <img ng-src="img/{{imgUrl}}" alt=""/>
-->
<select ng-model="imgObj" ng-options="imgObj.name for imgObj in imgList"></select> <img ng-src="img/{{imgObj.url}}" alt=""/> </div>
<script>
var app = angular.module('myApp', ['ng']);
app.controller('myCtrl', function ($scope) {
console.log('myCtrl func is called');
$scope.isAgree = true;
$scope.imgUrl = "1.jpg"; $scope.imgList = [
{name:'水仙花',url:'1.jpg'},
{name:'郁金香',url:'2.jpg'}
]
$scope.imgObj = $scope.imgList[0];
})
</script>
</body>
</html>
ng 双向数据绑定 实现 注册协议效果的更多相关文章
- ng 双向数据绑定
1.方向1:model->View模型数据绑定到视图 绑定的方式:①双花括号 ②常见的ng指令(ngRepeat ngIf ngShow....) 效果:数据一旦绑定到视图上,随着数据的修改,视 ...
- ng双向数据绑定
http://blog.csdn.net/callmekongkong/article/details/54601585
- angularJs初体验，实现双向数据绑定！使用体会：比较爽
使用初体验:ng 双向数据绑定: 最简单的双向数据绑定:(使用默认模块控制) <body ng-app> <input type="text" ng-model= ...
- 利刃 MVVMLight 3：双向数据绑定
上篇我们已经了解了MVVM的框架结构和运行原理.这里我们来看一下伟大的双向数据绑定. 说到双向绑定,大家比较熟悉的应该就是AngularJS了,几乎所有的AngularJS 系列教程的开篇 ...
- Angular4.x 创建组件|绑定数据|绑定属性|数据循环|条件判断|事件|表单处理|双向数据绑定
Angular4.x 创建组件|绑定数据|绑定属性|数据循环|条件判断|事件|表单处理|双向数据绑定 创建 angular 组件 https://github.com/angular/angular- ...
- 第217天：深入理解Angular双向数据绑定的原理
一.理解angular双向数据绑定 双向绑定是新的前端框架中频繁出现的一个新词汇,也是mvvm的核心原理.angularjs五条核心信念中的数据驱动,便是由双向绑定进行完成. 那么什么是双向绑定,下面 ...
- angularJs的指令系统和双向数据绑定
一.langularJs的指令系统 <!DOCTYPE HTML> <html ng-app><!--这种以ng开头的就是指令系统,初始化的一个指令,不仅可以加在html ...
- jQuery.my – 实时的复杂的双向数据绑定
jQuery.my 这个插件用于实时双向数据绑定.它发生变异给出的数据源对象,反映了用户与用户界面之间的相互作用.jQuery.my 提供了全面的验证,条件格式,复杂的依赖关系,运行形式结构操作. 马 ...
- 《AngularJS权威教程》中关于指令双向数据绑定的理解
在<AngularJS权威教程>中,自定义指令和DOM双向数据绑定有一个在线demo,网址:http://jsbin.com/IteNita/1/edit?html,js,output,具 ...
随机推荐
- URAL - 1900 Brainwashing Device
While some people travel in space from planet to planet and discover new worlds, the others who live ...
- Flume1.7.0的安装与使用
Flume下载后,解压,新增一个配置文件,写入配置即可 我将配置文件写在 conf 下,取名为 flume-conf-spooldir.properties Flume 运行命令: bin/flume ...
- $python数据分析基础——初识numpy库
numpy库是python的一个著名的科学计算库,本文是一个quickstart. 引入:计算BMI BMI = 体重(kg)/身高(m)^2 假如有如下几组体重和身高数据,让求每组数据的BMI值: ...
- Sybase：解锁
Sybase:解锁 Sql代码: --查询锁表 sp_iqlocks --解除锁定 drop connection[连接序号]
- Arrays.asList()与toArray()
Arrays.asList() 使用Arrays.asList()把数组转换成集合时,不能使用用于修改集合的方法(例如add.remove.clear),这将导致跑出UnsupportOperatio ...
- tesseract 3.05 release 编译
tesseract 3.05 release版本的对应配置好的vs2015工程.偷懒必备,毕竟依赖那么多库,环境配置还是要费点事的.https://github.com/peirick/VS2015_ ...
- 文件(2)--IO流
IO流 输入流和输出流 Java中的IO流根据功能划分为:输入流和输出流.输入流:用于读取数据.输出流:用于写出数据.输入输出的参照方向是根据我们的程序的. 字节流和字符流 Java中的IO流根据处理 ...
- NumPy切片和索引
NumPy - 切片和索引 ndarray对象的内容可以通过索引或切片来访问和修改,就像 Python 的内置容器对象一样. 如前所述,ndarray对象中的元素遵循基于零的索引. 有三种可用的索引方 ...
- InfiniBand技术和协议架构分析
Infiniband开放标准技术简化并加速了服务器之间的连接,同时支持服务器与远程存储和网络设备的连接. IB技术的发展 1999年开始起草规格及标准规范,2000年正式发表,但发展速度不及Rapid ...
- bootstrap-datepicker 时间范围选择函数封装
bootstrap-datepicker 时间范围选择函数封装 官网 https://bootstrap-datepicker.readthedocs.io/en/latest/index.html ...