<!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">
  请输入留言内容：
  <textarea ng-model="user_msg"></textarea>
  <br/>
  选择喜欢的颜色:
  <select ng-model="user_color">
    <option value="r">红色</option>
    <option value="g">绿色</option>
    <option value="b">蓝色</option>
  </select>
  <br/>
  是否同意
  <input type="checkbox"
         ng-model="user_agree"/>
</div>
<script>
  var app = angular.module('myApp', ['ng']);
  app.controller('myCtrl', function ($scope) {
    console.log('myCtrl  func is called');
    $scope.user_msg = "";
    $scope.user_color='r';
    $scope.user_agree = true;

    $scope.$watch('user_msg', function (newVal,oldVal) {
      console.log(newVal);
      console.log($scope.user_msg);
    })

    $scope.$watch('user_color', function () {
      console.log($scope.user_color);
    })

    $scope.$watch('user_agree', function () {
      console.log($scope.user_agree);
    })

    console.log($scope);

  })
</script>
</body>
</html>

Angular 双向数据绑定的更多相关文章

  1. 第217天：深入理解Angular双向数据绑定的原理

    一.理解angular双向数据绑定 双向绑定是新的前端框架中频繁出现的一个新词汇,也是mvvm的核心原理.angularjs五条核心信念中的数据驱动,便是由双向绑定进行完成. 那么什么是双向绑定,下面 ...

  2. Angular双向数据绑定MVVM以及基本模式分析

    MVVM: angular的MVVM实现的是双向数据绑定,模型从服务器端抓取到数据,将数据通过控制器(controller)传递到视图(view)显示,视图数据发生变化时同样也会影响到模型数据的变化, ...

  3. angular 双向数据绑定与vue数据的双向数据绑定

    二者都是 MVVM 模式开发的典型代表 angular 是通过脏检测实现,angular 会将 UI 事件,请求事件,settimeout 这类延迟的对象放入到事件监测的脏队列,当数据变化的时候,触发 ...

  4. angular双向数据绑定

    <body ng-app> //三个view都会变 <input type="text" ng-model="name" value=&quo ...

  5. 双向数据绑定（angular,vue）

    最近github上插件项目更新了关于双向数据绑定的实现方式,关于angular和vue. angular众所周知是使用的脏检查($dirty).一开始大家会认为angular开启了类似setInter ...

  6. Angular解决双向数据绑定

    <!DOCTYPE html> <html ng-app="myApp1"><body><div ng-controller=" ...

  7. Angular自定义组件实现数据双向数据绑定

    学过Angular的同学都知道,输入框通过[(ngModel)]实现双向数据绑定,那么自定义组件能不能实现双向数据绑定呢?答案是肯定的. Angular中,我们常常需要通过方括号[]和圆括号()实现组 ...

  8. angular,vue,react的基本语法—双向数据绑定、条件渲染、列表渲染、angular小案例

    基本语法: 1.双向数据绑定 vue 指令:v-model="msg" react constructor(){ this.state{ msg:"双向数据绑定" ...

  9. angular和vue双向数据绑定

    angular和vue双向数据绑定的原理(重点是vue的双向绑定) 我在整理javascript高级程序设计的笔记的时候看到面向对象设计那章,讲到对象属性分为数据属性和访问器属性,我们平时用的js对象 ...

随机推荐

  1. （转）Spring Boot 2 (四)：使用 Docker 部署 Spring Boot

    http://www.ityouknow.com/springboot/2018/03/19/spring-boot-docker.html Docker 技术发展为微服务落地提供了更加便利的环境,使 ...

  2. linux下的文件目录结构

    linux的文件系统是采用层级式的树状目录结构,在此结构中的最上层是根目录“/”,然后在此目录下再创建其他的目录 - root,存放root用户的相关文件 - home,存放普通用户的相关文件 - b ...

  3. nginx学习笔记（二）

    tail -f /var/log/nginx/access.log 查看nginx访问日志 安装ab压测工具 连接限制只有公有云才能测出,虚拟机只能测请求限制 添加用户 覆盖用户 新增用户 文件是配置 ...

  4. 【转】OS X Base System 上没有足够的空间来进行安装

    今天在windows环境下安装IOS虚拟机,安装过程中报了一个错:“OS X Base System ”上没有足够的空间来进行安装.如图: 之后的解决办法是:点击上方的[实用工具]->[磁盘工具 ...

  5. 【vue】vue +element 搭建项目，加（解）密

    1.安装依赖 cnpm(npm) install --save js-base64 2.应用 import { Base64 } from 'js-base64'; //加密 getEncode(){ ...

  6. 003_python学习之 字符串前'r'的用法

    在打开文件的时候open(r'c:\....') 加r和不加''r是有区别的 'r'是防止字符转义的 如果路径中出现'\t'的话 不加r的话\t就会被转义 而加了'r'之后'\t'就能保留原有的样子 ...

  7. ActiveMQ的queue以及topic两种消息处理机制分析

    1    queue与topic的技术特点对比 对比项 Topic Queue 概要 Publish Subscribe messaging 发布订阅消息 Point-to-Point 点对点 有无状 ...

  8. Linux 实例如何开启 MySQL 慢查询功能

    运行 MySQL 时,查询速度比较慢的语句对数据库的影响非常大,这些慢语句大多是写的不够合理或者大数据环境下多表并发查询造成的.MySQL 自带慢查询功能,能记录查询时间超过参数 long_query ...

  9. 《HTTP协议：菜鸟入门系列》

    很多测试人员在有了一定的测试经验(一般是1-2年)后,就会陷入瓶颈阶段,想提升,但不知道如何提升,学习又没有比较明确的方向,曾经我也是... 那么,我建议系统的学习一下HTTP协议,好处很多:对接口测 ...

  10. 从源码看Spring Security之采坑笔记（Spring Boot篇）

    一:唠嗑 鼓捣了两天的Spring Security,踩了不少坑.如果你在学Spring Security,恰好又是使用的Spring Boot,那么给我点个赞吧!这篇博客将会让你了解Spring S ...