<!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. jsp 或 php 等view之中使用javascript简单处理的使用技巧

    前端人员在jsp,php等后台mvc之的coding之时,前端人员常常需要一些少量的数据处理,直接使用js的方法无疑是开销最小的.使用的方法 使用在标签之中嵌套script标签,使用document. ...

  2. (转）Spring Boot(四)：Thymeleaf 使用详解

    http://www.ityouknow.com/springboot/2016/05/01/spring-boot-thymeleaf.html 在上篇文章Spring Boot (二):Web 综 ...

  3. linux学习笔记整理（二）

    第三章 Linux基本命令操作本节所讲内容:3.1 Linux终端介绍 Shell提示符 Bash Shell基本语法3.2 基本命令的使用:ls.pwd.cd.history3.3 查看系统和BIO ...

  4. Java锁的种类以及辨析（二）：自旋锁的其他种类

    作者:山鸡 锁作为并发共享数据,保证一致性的工具,在JAVA平台有多种实现(如 synchronized 和 ReentrantLock等等 ) .这些已经写好提供的锁为我们开发提供了便利,但是锁的具 ...

  5. 小a的轰炸游戏 （差分）

    我是看题解的! 这道题还是有很多细节,当然,是一道差分的好题! 题意:有2种飞机,一种是只炸上半菱形,一种是炸整个菱形.问所有区域内的所有格子的异或和. 思路:用前缀和思路: 这样遍历过去就完成了一次 ...

  6. leetcode 704. Binary Search 、35. Search Insert Position 、278. First Bad Version

    704. Binary Search 1.使用start+1 < end,这样保证最后剩两个数 2.mid = start + (end - start)/2,这样避免接近max-int导致的溢 ...

  7. Luogu1627 [CQOI2009]中位数

    Luogu1627 [CQOI2009]中位数 给出一个 \(n\) 的排列,统计该排列有多少个长度为奇数的连续子序列的中位数是 \(k\) \(n\leq10^5\) \(trick\) :因为不需 ...

  8. 简单的if多分支结构练习:用户录入 1-10的数字 , 1-7没奖品 , 8,9,10分别获得 3 2 1 等奖

    package com.summer.cn; import java.util.Scanner; /** * @author Summer *简单的if多分支结构练习 *用户录入 1-10的数字 , ...

  9. 无线智联-程序篇：让python与matlab牵手

    python和matlab本来是青梅竹马的好基友,奈何相爱相杀,经常放在一起做对比,就好比经常听到的,“你看看隔壁xx家的孩子”,其实每个孩子都有每个孩子的优点,如果能发挥每个孩子的优点,岂不是更好. ...

  10. 从零开始搭建django前后端分离项目 系列六（实战之聚类分析）

    项目需求 本项目从impala获取到的数据为用户地理位置数据,每小时的数据量大概在8000万条,数据格式如下: 公司要求对这些用户按照聚集程度进行划分,将300米范围内用户数大于200的用户划分为一个 ...