<!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 (七)：Spring Boot 如何解决项目启动时初始化资源

    http://www.ityouknow.com/springboot/2018/05/03/spring-boot-commandLineRunner.html 在我们实际工作中,总会遇到这样需求, ...

  2. Android面试题目整理与解说（二）

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/bz419927089/article/details/31386787 1.Dalvik和标准Jav ...

  3. UVA12558-Efyptian Fractions(HARD version)(迭代加深搜索)

    Problem UVA12558-Efyptian Fractions(HARD version) Accept:187  Submit:3183 Time Limit: 3000 mSec  Pro ...

  4. [matlab] 23.matlab自带kmeans函数 实现聚类

    clc,clear all; point=[1.40000000000000,0.200000000000000;1.40000000000000,0.200000000000000;1.300000 ...

  5. Oracle的条件in中包含NULL时的处理

    我们在写SQL时经常会用到in条件,如果in包含的值都是非NULL值,那么没有特殊的,但是如果in中的值包含null值(比如in后面跟一个子查询,子查询返回的结果有NULL值),Oracle又会怎么处 ...

  6. JSON.stringify()和JSON.parse()的作用

    (1)JSON.stringify() 从一个对象中解析出字符串 JSON.stringify({“a”:”1”,”b”:”2”}) 结果是:”{“a”:”1”,”b”:”2”}” (2)JSON.p ...

  7. easyui的浮动panel不跟随所在页面一起滚动的问题

    项目开发中遇到一个很奇怪的现象就是:随便点开一个下拉控件,包括combo,combobox,databox,combogird等等,都会出现点开的panel面板正常,如果页面有滚动条,一用鼠标滚轮滚动 ...

  8. ASP.NET MVC5+EF6+EasyUI 后台管理系统（91）-EF 连接 MySql

    前言 虽然系统目前只支持MSSQL版本,但是很多朋友公司技术规定必须使用MySql,下面我们就来使用EF连接MySQL吧! (1)安装MYSQL环境 1.下载安装MYSQL数据,这里我们安装phpSt ...

  9. nodejs简单模仿web.net web api

    最近用了asp.net web api + EF开发一个项目,但是移植到linux时遇到问题(mono只支持EF6.0,但是mysql驱动不支持EF6.0).所以决定换个思路,用nodejs实现res ...

  10. IIS 日志导入到数据库的方法

    使用微软Log Parser 执行 logparser "SELECT * FROM d:\iislogs\u_ex18071705.log TO myTableName" -o: ...