如果对象模型发生变化时，可以使用$scope.$watch监控变化

<html ng-app="myApp">

<head>

<title>angularjs-demo</title>

<script type="text/javascript" src="lib/angularjs/angular.min.js" charset="utf-8"></script>

</head>

<body ng-controller="ctrl">

<input type="text" ng-model="text1" ng-model-options="{ updateOn: 'blur' }" />

<div>输入框内容改变次数：{{count}}</div>

</body>

<script type="text/javascript">

var app = angular.module('myApp', [])

.controller('ctrl', function($scope){

    $scope.count = 0;

    $scope.$watch('text1',function(){

        $scope.count++;

    });

});

</script>

</html>

稍微改一下，输出修改前后的内容：

<html ng-app="myApp">

<head>

<title>angularjs-demo</title>

<script type="text/javascript" src="lib/angularjs/angular.min.js" charset="utf-8"></script>

</head>

<body ng-controller="ctrl">

<input type="text" ng-model="text1" ng-model-options="{ updateOn: 'blur' }" />

<div>输入框内容改变次数：{{count}}</div>

<div>原内容：{{content1}}</div>

<div>新内容：{{content2}}</div>

</body>

<script type="text/javascript">

var app = angular.module('myApp', [])

.controller('ctrl', function($scope){

    $scope.count = 0;

    $scope.$watch('text1',function(newValue,oldValue){

        $scope.count++;

        $scope.content1 = oldValue;

        $scope.content2 = newValue;

    });

});

</script>

</html>

angularjs中使用$scope.$watch监控对象模型的变化的更多相关文章

  1. 理解angularJS中作用域$scope

    angularJS中作用域是什么 作用域(scope)是构成angularJS应用的核心基础,在整个框架中都被广泛使用,因此了解它如何工作是非常重要的 应用的作用域是和应用的数据模型相关联的,同时作用 ...

  2. angularjs指令中的scope

    共享 scope 使用共享 scope 的时候,可以直接从父 scope 中共享属性.因此下面示例可以将那么属性的值输出出来.使用的是父 scope 中定义的值. js代码: app.controll ...

  3. AngularJS 深入理解 $scope

    $scope 的使用贯穿整个 AngularJS App 应用,它与数据模型相关联,同时也是表达式执行的上下文.有了$scope 就在视图和控制器之间建立了一个通道,基于作用域视图在修改数据时会立刻更 ...

  4. 后端接收不到AngularJs中$http.post发送的数据的问题

    1.问题: 后端接收不到AngularJs中$http.post发送的数据,总是显示为null 示例代码: $http.post(/admin/KeyValue/GetListByPage, { pa ...

  5. AngularJS进阶(二十一)Angularjs中scope与rootscope区别及联系

    Angularjs中scope与rootscope区别及联系 scope是html和单个controller之间的桥梁,数据绑定就靠他了.rootscope是各个controller中scope的桥梁 ...

  6. 黄聪：AngularJS中的$resource使用与Restful资源交互（转）

    原文:http://blog.csdn.net/he90227/article/details/50525836 1.AngularJS中的 $resource 这个服务可以创建一个资源对象,我们可以 ...

  7. AngularJS中实现显示或隐藏动画效果的3种方式

    本篇体验在AngularJS中实现在"显示/隐藏"这2种状态切换间添加动画效果. 通过CSS方式实现显示/隐藏动画效果 思路: →npm install angular-anima ...

  8. 深入学习AngularJS中数据的双向绑定机制

    来自:http://www.jb51.net/article/80454.htm Angular JS (Angular.JS) 是一组用来开发Web页面的框架.模板以及数据绑定和丰富UI组件.它支持 ...

  9. angular中的scope

    angular.element($0).scope() 什么是scope? scope是一个refer to the application model的object.它是一个expression的执 ...

随机推荐

  1. T型知识实践结构的力量(转载)

    最近在做的一些新的事情,这其中获得的一些新的思考. T型的知识积累,深度的挖掘可以通过"举一反三"的应用在广度上,广度可以通过"交叉验证"加强我们的认识,可以说 ...

  2. [BZOJ4817][SDOI2017]树点涂色(LCT+DFS序线段树)

    4817: [Sdoi2017]树点涂色 Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 692  Solved: 408[Submit][Status ...

  3. POJ 2728 JZYZOJ 1636 分数规划 最小生成树 二分 prim

    http://172.20.6.3/Problem_Show.asp?id=1636 复习了prim,分数规划大概就是把一个求最小值或最大值的分式移项变成一个可二分求解的式子. #include< ...

  4. 【四边形不等式】POJ1160[IOI2000]-Post Office

    [题目大意] v个村庄p个邮局,邮局在村庄里,给出村庄的位置,求每个村庄到最近邮局距离之和的最小值. [思路] 四边形不等式,虽然我并不会证明:( dp[i][j]表示前i个村庄建j个邮局的最小值,w ...

  5. Zookeeper启动和集群选举

    1. QuorumPeerMain运行 1)判断是采用单实例模式还是多实例模式启动QuorumPeerMain 2)在多实例模式下,加载启动参数中指定的配置文件 3)启动QuorumPeer publ ...

  6. ROS知识（4）----初级教程之常见问题汇总

    一.开机启动ROS的工作空间的路径设置失败 现象:在教程:http://wiki.ros.org/cn/ROS/Tutorials/CreatingPackage中的第5.1小节,运行以下命令失败: ...

  7. 【美】范·K·萨普曼 － 通向财务自由之路（2013年11月26日）

    <通向财务自由之路> 作 者:[美]范·K·萨普曼  译 者:董梅 系 列: 出 版:机械工业出版社 字 数:约40千字 阅读完成:2013年11月26日

  8. java内存分配 常量池详解

    http://www.cnblogs.com/qinqinmeiren/archive/2011/07/19/2151683.html

  9. JavaScript学习10：动态载入脚本和样式

    我们在写Web页面的时候,须要引入非常多的JavaScript脚本文件和CSS样式文件,尤其是在站点需求量非常大的时候,脚本的需求量也随之变大,这样一来,站点的性能就会大打折扣.因此就出现了动态载入的 ...

  10. [IIS]由安装IIS和.net framework先后顺序引发的问题，你中招了吗？

    引言 最近帮别人做了一个小网站,在本机部署测试的时候,竟然浏览不了aspx后缀的页面,但可以浏览html页面,由此想到了IIS对静态页和动态页不同的处理方式. http请求到达服务器 当服务器接收到一 ...