ng 双向数据绑定实现注册协议效果

效果：

代码：

<!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>

查看全文

相关阅读:
HBase-MapReduce
HBase API 操作
 HBase-Shell-数据结构-原理
 HBase-简介-安装配置
 Kafka 与 Flume
kafka-Streams
Kafka-producer拦截器(interceptor)
Kafka-API
Kafka-工作流程分析
 day06 Java面向对象

原文地址：https://www.cnblogs.com/web-fusheng/p/6953703.html

ng 双向数据绑定 实现 注册协议效果

ng 双向数据绑定实现注册协议效果