效果：

代码：

<!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. MyIBatis使用

    1.如果根据一些Id进行删除,那么会用到In的用法如: <delete id="DeleteByIds" parameterClass="UserInfo" ...

  2. 在Windows上以服务方式运行 Redis

    ServiceStack.Redis 使用教程里提到Redis最好还是部署到Linux下去,Windows只是用来 做开发环境,现在这个命题发生改变了,在Windows上也可以部署生产环境的Redis ...

  3. LVS管理工具--ipvsadm

    一. ipvsadm工具介绍 从2.4版本开始,linux内核默认支持LVS.要使用LVS的能力,只需安装一个LVS的管理工具:ipvsadm. LVS的结构主要分为两部分: 工作在内核空间的IPVS ...

  4. C++ string 用法总结

    string查找替换.分割字符串.比较.截取.类型转换.排序等功能都提供了强大的处理函数,可以代替字符数组来使用. 熟练掌握好string的各种使用方法,能极大的提高编程效率哦 ^_^. #inclu ...

  5. Monkey测试命令【学习笔记】

    monkey --ignore-crashes --ignore-timeouts --ignore-security-exceptions --ignore-native-crashes -v 30 ...

  6. [Android]自定义控件LoadMoreRecyclerView

    RecyclerView是加强版的ListView,用于在有限的窗口中展示大量的数据,而LoadMoreRecyclerView则是为RecyclerView增加了加载更多的功能,先来看效果: 三种加 ...

  7. 织梦dedecms5.7二级域名文章图片不显示修改方法.相对路径改为绝对路径的方法

    dedecms升级到5.7SP1后,开启二级域名,你会发现,在二级域名下的文章,上传的图片地址都是:二级域名+图片地址,这是相对路径.但是你的图片是默认上传在uploads里面的.应该使用绝对路径.这 ...

  8. jQuery的序列化元素 serialize()方法 serializeArray()方法 param()方法

    当提交的表单元素较多时用serialize()方法,serialize()方法也是作用于一个jQuery的对象,它能够将DOM元素内容序列化为字符串,用于Ajax请求. serialize() 方法通 ...

  9. eclipse——jsp字体设置

    步骤如下

  10. var与this定义变量的区别以及疑惑

    我们知道: var可以定义一个局部变量,当然如果var定义在最外层的话,就是全局的局部变量,也就算是全局变量了. 而this关键字定义的变量准确的说应该算是成员变量.即定义的是调用对象的成员变量. 另 ...