效果：

代码：

<!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. SQLAlchemy_定义(一对一/一对多/多对多)关系

    目录 Basic Relationship Patterns One To Many One To One Many To Many Basic Relationship Patterns 基本关系模 ...

  2. [转]浅谈Hive vs. HBase 区别在哪里

    浅谈Hive vs. HBase 区别在哪里 导读:Apache Hive是一个构建于Hadoop(分布式系统基础架构)顶层的数据仓库,Apache HBase是运行于HDFS顶层的NoSQL(=No ...

  3. 把 html标签转化为 html标签代码

    HttpUtility.HtmlEncode(table.Rows[0]["footnote"].ToString());

  4. 【Java】仿真qq尝试：用户注册（三）

    需求: 实现用户名和密码存入数据库. 思路: 1.连接数据表用静态加载块 2.crud写成4个静态方法 具体流程: from:https://www.tutorialspoint.com/jdbc/j ...

  5. jQuery动态网址标签

    在线演示 本地下载

  6. Cisco交换机设备配置镜像端口

    查看交换机端口的基本情况,输入命令 show ip int bri,可以查看端口状态 FastEthernet表示百兆以太网端口,GigabitEthernet表示千兆以太网端口. 进入全局模式 设置 ...

  7. [翻译]PostCSS简介

    许多开发人员花时间在使用CSS的预处理器上如less,sass和stylus.这些工具已经成为Web开发的重要组成部分.写一个网站的样式,不使用嵌套,变量或混入等功能很少见.它们每个都是非常实用的,让 ...

  8. 深入理解JVM 垃圾收集器(上）

    HotSpot虚拟机中的垃圾收集器 GC评价标准 GC调优 响应时间 吞吐量 1.新生代收集器 Serial收集器 ParNew收集器 Parallel Scavenge收集器 2.老年代收集器 Se ...

  9. Maven+Struts+Hibernate+Spring简单项目搭建

    这段时间学习如何使用Maven+Struts+Hibernate+Spring注解方式建立项目,在这里感谢孙宇老师.    第一次写博客,主要是方便自己查看,同时分享给大家,希望对大家有所帮助,我也是 ...

  10. BZOJ4456/UOJ184 [Zjoi2016]旅行者

    本文版权归ljh2000和博客园共有,欢迎转载,但须保留此声明,并给出原文链接,谢谢合作. 本文作者:ljh2000 作者博客:http://www.cnblogs.com/ljh2000-jump/ ...