效果：

代码：

<!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 双向数据绑定 实现 注册协议效果的更多相关文章

  1. ng 双向数据绑定

    1.方向1:model->View模型数据绑定到视图 绑定的方式:①双花括号 ②常见的ng指令(ngRepeat ngIf ngShow....) 效果:数据一旦绑定到视图上,随着数据的修改,视 ...

  2. ng双向数据绑定

    http://blog.csdn.net/callmekongkong/article/details/54601585

  3. angularJs初体验，实现双向数据绑定！使用体会：比较爽

    使用初体验:ng 双向数据绑定: 最简单的双向数据绑定:(使用默认模块控制) <body ng-app> <input type="text" ng-model= ...

  4. 利刃 MVVMLight 3：双向数据绑定

          上篇我们已经了解了MVVM的框架结构和运行原理.这里我们来看一下伟大的双向数据绑定. 说到双向绑定,大家比较熟悉的应该就是AngularJS了,几乎所有的AngularJS 系列教程的开篇 ...

  5. Angular4.x 创建组件|绑定数据|绑定属性|数据循环|条件判断|事件|表单处理|双向数据绑定

    Angular4.x 创建组件|绑定数据|绑定属性|数据循环|条件判断|事件|表单处理|双向数据绑定 创建 angular 组件 https://github.com/angular/angular- ...

  6. 第217天：深入理解Angular双向数据绑定的原理

    一.理解angular双向数据绑定 双向绑定是新的前端框架中频繁出现的一个新词汇,也是mvvm的核心原理.angularjs五条核心信念中的数据驱动,便是由双向绑定进行完成. 那么什么是双向绑定,下面 ...

  7. angularJs的指令系统和双向数据绑定

    一.langularJs的指令系统 <!DOCTYPE HTML> <html ng-app><!--这种以ng开头的就是指令系统,初始化的一个指令,不仅可以加在html ...

  8. jQuery.my – 实时的复杂的双向数据绑定

    jQuery.my 这个插件用于实时双向数据绑定.它发生变异给出的数据源对象,反映了用户与用户界面之间的相互作用.jQuery.my 提供了全面的验证,条件格式,复杂的依赖关系,运行形式结构操作. 马 ...

  9. 《AngularJS权威教程》中关于指令双向数据绑定的理解

    在<AngularJS权威教程>中,自定义指令和DOM双向数据绑定有一个在线demo,网址:http://jsbin.com/IteNita/1/edit?html,js,output,具 ...

随机推荐

  1. Ubuntu安装及一些初始操作

    目录 使用Universal-USB-Installer安装Ubuntu Ubuntu连接无线网络 Windows与Ubuntu双系统时间不一致解决办法 Ubuntu安装Sublime Text 3 ...

  2. vscode 编写c++

    参考了 配置文件之前的操作:https://www.cnblogs.com/lianshuiwuyi/p/8094388.html 配置文件具体内容:https://blog.csdn.net/qq5 ...

  3. pytharm提示过期 License Activation 解决办法

    遇到如下问题: 打开网站:  http://idea.lanyus.com/   next next ok    

  4. redis 笔记01 简单动态字符串、链表、字典、跳跃表、整数集合、压缩列表

    文中内容摘自<redis设计与实现> 简单动态字符串 1. Redis只会使用C字符串作为字面量,在大多数情况下,Redis使用SDS(Simple Dynamic String,简单动态 ...

  5. 优秀 H5 案例收集 vol.1（不定期更新）

    一生要历经的三种战斗http://datang.wearewer.com/ 雍正去哪儿http://news.163.com/college/special/craftsman_h5/ 比Emoji更 ...

  6. COS－4进程及进程管理

    操作系统是用户和计算机的接口,同时也是计算机硬件和其他软件的接口.操作系统的功能包括管理计算机系统的硬件.软件及数据资源,控制程序运行,改善人机界面,为其它应用软件提供支持,让计算机系统所有资源最大限 ...

  7. C3p0的参数

    C3p0的参数设置:ComboPooledDataSource和BasicDataSource一样提供了一个用于关闭数据源的close()方法,这样我们就可以保证Spring容器关闭时数据源能够成功释 ...

  8. Extracting info from VCF files

    R, Bioconductor filterVcf: Extract Variants of Interest from a Large VCF File (Paul Shannon) We demo ...

  9. spark学习14（spark local模式运行spark程序的报错）

    报错1 java.io.IOException: Could not locate executable null\bin\winutils.exe in the Hadoop binaries. 解 ...

  10. windchill系统——开发_菜单栏添加选项（模型添加action）

    目录:C:\ptc\Windchill_11.0\Windchill\codebase\config\actions 文件:custom-actionModels.xml和custom-actions ...