效果：

代码：

<!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. mysql监控报警工具

    #!/usr/bin/env python # coding:utf-8 import MySQLdb import requests, json import time url = "ht ...

  2. 125. Valid Palindrome(判断忽略标点的字符串是否回文，加个正则，与上一题解法一样)

    Given a string, determine if it is a palindrome, considering only alphanumeric characters and ignori ...

  3. 关于Python字符编码encode和decode

    (注:本文部分内容摘自互联网,由于作者水平有限,不足之处,还望留言指正.) 记得几天前,部门的一个小姑娘问我,怎么她Python打印出来的中文信息都乱码了?我走过去,略思一二,瞬间给她搞定,其实这是字 ...

  4. 《棋牌游戏服务器》斗地主AI设计

    设计目标 要取得良好效果,首先要搞清楚一个问题:我们想得到一个什么样的斗地主AI?我们的AI是用在手游产品当中,在真实玩家不足时为用户提供陪玩服务,这个目标决定了这个AI要具备以下两个核心特点:1.执 ...

  5. Spring中的@Transactional以及事务的详细介绍

    首先来说下事务,说到事务就不得不说它的四个特性(acid): 一.特性 1.原子性(atomicity):一个事务当作为一个不可分割的最小工作单元,一组操作要么全部成功,要么全部失败. 2.一致性(c ...

  6. Execute Disable Bit

    “Execute Disable Bit”是Intel在新一代处理器中引入的一项功能,开启该功能后,可以防止病毒.蠕虫.木马等程序利用溢出.无限扩大等手法去破坏系统内存并取得系统的控制权.其工作原理是 ...

  7. SMM+maven下的log4j配置打印sql

    1加入依赖包 <!--LOG4日志 start --> <dependency> <groupId>org.slf4j</groupId> <ar ...

  8. pyspider脚本编写指南

    注意,虽然在本文中会涉及调度策略等内容,但实际执行效果取决于具体策略实现. project 脚本分为不同的 project,不同的 project 之间的任务互相独立,建议为不同的站点建立不同的 pr ...

  9. 移动端给img元素添加content: "";

    误给img原始添加 content: "";属性后发现在ios系统中图片是不会显示的android系统是正常的

  10. Spring -- 如何为applicationContext.xml 添加 util 的 *.xsd文件