效果：

代码：

<!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. 微信小程序组件checkbox

    表单组件checkbox:官方文档 Demo Code: JS Page({ data:{ items:[ {name: 'USA', value: '美国'}, {name: 'CHN', valu ...

  2. CNN学习笔记：池化层

    CNN学习笔记:池化层 池化 池化(Pooling)是卷积神经网络中另一个重要的概念,它实际上是一种形式的降采样.有多种不同形式的非线性池化函数,而其中“最大池化(Max pooling)”是最为常见 ...

  3. java 偏向锁怎么升级为轻量级锁

    因为偏向锁,锁住对象时,会写入对象头相应的标识,我们先把对象头(官方叫法为:Mark Word)的图示如下(借用了网友的图片): 通过上面的图片,我们可以知道,对象处于偏向锁时,mark word中的 ...

  4. 谁说程序员不懂爱情【Her】

    2014.8.17日 我和我女朋友恋爱两周年的日子.走到今天很不容易,我很珍惜. 就想趁这机会,尽自己能力做一个特别的礼物. 这款应用两周前就开始计划了.也熬了几个晚上.接触wp开发时间不长,第一款应 ...

  5. Thrift简单调用

    pom.xml <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w ...

  6. 用来在category里加属性的宏

    众所周知,一般的情况下我们是没办法在category里加属性的. 如果想加,需要用到Associated. @interface NSObject (XYFlyweightTransmit) @pro ...

  7. minicom退出方法【转】

    本文转载自:https://blog.csdn.net/jhyworkspace/article/details/53572284 1)需使用Ctrl+a 进入设置状态2)按z进入设置菜单(1)S键: ...

  8. 并发-CountDownLatch、CyclicBarrier和Semaphore

    CountDownLatch.CyclicBarrier和Semaphore 参考: http://www.cnblogs.com/dolphin0520/p/3920397.html https:/ ...

  9. Mysql 分组聚合实现 over partition by 功能

    mysql中没有类似oracle和postgreSQL的 OVER(PARTITION BY)功能. 那么如何在MYSQL中搞定分组聚合的查询呢 先说结论: 利用 group_concat + sub ...

  10. TrappingRainWater

    问题描述: Given n non-negative integers representing an elevation map where the width of each bar is 1, ...