1. <!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;
  2.  
  3.     $scope.$watch('user_msg', function (newVal,oldVal) {
          console.log(newVal);
          console.log($scope.user_msg);
        })
  4.  
  5.     $scope.$watch('user_color', function () {
          console.log($scope.user_color);
        })
  6.  
  7.     $scope.$watch('user_agree', function () {
          console.log($scope.user_agree);
        })
  8.  
  9.     console.log($scope);
  10.  
  11.   })
    </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. redis的过期时间和过期删除机制

    一:设置过期时间 redis有四种命令可以用于设置键的生存时间和过期时间: EXPIRE <KEY> <TTL> : 将键的生存时间设为 ttl 秒 PEXPIRE <K ...

  2. go struct{}的几种特殊用法

    参考:https://blog.csdn.net/kturing/article/details/80557280 1.声明为声明为map[string]struct{} 由于struct{}是空,不 ...

  3. day25 Python __setattr__

    #__getattr__只有在使用点调用属性且属性不存在的时候才会触发 class Foo: x=1 def __init__(self,y): self.y=y def __getattr__(se ...

  4. Uncaught ReferenceError: layer is not defined

    错误详细信息,如下: Uncaught ReferenceError: layer is not defined' 关键词就是not defined 未定义,那么解决方案就是给它定义. 原来的问题代码 ...

  5. python：利用xlrd模块操作excel

    在自动化测试过程中,对测试数据的管理和维护是一个不可忽视的点.一般来说,如果测试用例数据不是太多的话,使用excel管理测试数据是个相对来说不错的选择. 这篇博客,介绍下如何利用python的xlrd ...

  6. Generative Adversarial Nets[Wasserstein GAN]

    本文来自<Wasserstein GAN>,时间线为2017年1月,本文可以算得上是GAN发展的一个里程碑文献了,其解决了以往GAN训练困难,结果不稳定等问题. 1 引言 本文主要思考的是 ...

  7. SQL开窗函数

    [SQL]四种排序开窗函数   一 .简单了解什么是开窗函数 什么是开窗函数,开窗函数有什么作用,特征是什么? 所谓开窗函数就是定义一个行为列,简单讲,就是在你查询的结果上,直接多出一列值(可以是聚合 ...

  8. 【C#复习总结】析构函数

    上篇提到析构函数,就顺便复习一下. 一 C# 析构函数 1.1 析构函数的定义 析构函数用于释放被占用的系统资源. 析构函数的名字由符号“-”加类名组成. 1.2 析构函数注意的问题 使用析构函数时, ...

  9. H5 65-清除浮动方式一

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  10. 小程序wxRequest封装

    //const host = 'http://114.215.00.00:8005';// 测试地址 const host = 'https://xx.xxxxxxxx.net'; // 正式地址 c ...