angularjs中使用$scope.$watch监控对象模型的变化
如果对象模型发生变化时，可以使用$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监控对象模型的变化的更多相关文章
- 理解angularJS中作用域$scope
angularJS中作用域是什么 作用域(scope)是构成angularJS应用的核心基础,在整个框架中都被广泛使用,因此了解它如何工作是非常重要的 应用的作用域是和应用的数据模型相关联的,同时作用 ...
- angularjs指令中的scope
共享 scope 使用共享 scope 的时候,可以直接从父 scope 中共享属性.因此下面示例可以将那么属性的值输出出来.使用的是父 scope 中定义的值. js代码: app.controll ...
- AngularJS 深入理解 $scope
$scope 的使用贯穿整个 AngularJS App 应用,它与数据模型相关联,同时也是表达式执行的上下文.有了$scope 就在视图和控制器之间建立了一个通道,基于作用域视图在修改数据时会立刻更 ...
- 后端接收不到AngularJs中$http.post发送的数据的问题
1.问题: 后端接收不到AngularJs中$http.post发送的数据,总是显示为null 示例代码: $http.post(/admin/KeyValue/GetListByPage, { pa ...
- AngularJS进阶(二十一)Angularjs中scope与rootscope区别及联系
Angularjs中scope与rootscope区别及联系 scope是html和单个controller之间的桥梁,数据绑定就靠他了.rootscope是各个controller中scope的桥梁 ...
- 黄聪：AngularJS中的$resource使用与Restful资源交互（转）
原文:http://blog.csdn.net/he90227/article/details/50525836 1.AngularJS中的 $resource 这个服务可以创建一个资源对象,我们可以 ...
- AngularJS中实现显示或隐藏动画效果的3种方式
本篇体验在AngularJS中实现在"显示/隐藏"这2种状态切换间添加动画效果. 通过CSS方式实现显示/隐藏动画效果 思路: →npm install angular-anima ...
- 深入学习AngularJS中数据的双向绑定机制
来自:http://www.jb51.net/article/80454.htm Angular JS (Angular.JS) 是一组用来开发Web页面的框架.模板以及数据绑定和丰富UI组件.它支持 ...
- angular中的scope
angular.element($0).scope() 什么是scope? scope是一个refer to the application model的object.它是一个expression的执 ...
随机推荐
- python-爬虫技能升级记录
====== python-爬虫技能升级记录 ====== ===== (一)感知爬虫及爬取流程 =====<code>从简单存取一个页面到 爬取到大量的定量数据,对技术要求更高,以百度百 ...
- 【BZOJ 4305】 4305: 数列的GCD （数论）
4305: 数列的GCD Description 给出一个长度为N的数列{a[n]},1<=a[i]<=M(1<=i<=N). 现在问题是,对于1到M的每个整数d,有多少个不 ...
- uoj22 【UR #1】外星人
link 题意: 给一个长为n的序列a[],现在有一个初始值m,问一个1~n的排列p[],满足将m对a[p[i]]顺次取模后得到的值最大,输出最大值和方案数. $n,m\leq 5\times 10^ ...
- python中后端数据序列化不显示中文的解决方法
我们在前后端交互的时候,让序列化的数据更友好的显示,我们会用到 import json js = json.loads('{"name": "多多"}') pr ...
- [bzoj1022][SHOI2008]小约翰的游戏 John (博弈论)
Description 小约翰经常和他的哥哥玩一个非常有趣的游戏:桌子上有n堆石子,小约翰和他的哥哥轮流取石子,每个人取的时候,可以随意选择一堆石子,在这堆石子中取走任意多的石子,但不能一粒石子也不取 ...
- bzoj1798 维护序列
Description 老师交给小可可一个维护数列的任务,现在小可可希望你来帮他完成. 有长为N的数列,不妨设为a1,a2,…,aN .有如下三种操作形式: (1)把数列中的一段数全部乘一个值; (2 ...
- NOIP200606金明的预算方案
试题描述: 金明今天很开心,家里购置的新房就要领钥匙了,新房里有一间金明自己专用的很宽敞的房间.更让他高兴的是,妈妈昨天对他说:“你的房间需要购买哪些物品,怎么布置,你说了算,只要不超过N元钱就行”. ...
- Android中的数据存储（二）：文件存储 2017-05-25 08:16 35人阅读 评论(0) 收藏
文件存储 这是本人(菜鸟)学习android数据存储时接触的有关文件存储的知识以及本人自己写的简单地demo,为初学者学习和使用文件存储提供一些帮助.. 如果有需要查看SharedPreference ...
- 蓝屏代码详解（更新WIN7蓝屏代码）
6位代码含意 0 0x0000 作业完成. 1 0x0001 不正确的函数. 2 0x0002 系统找不到指定的档案. 3 0x0003 系统找不到指定的路径. 4 0x0004 系统无法开启 ...
- oracle定时任务(dbms_job)
author:skate time:2007-09-12 http://publish.it168.com/2006/0311/20060311017002.shtml 今天总结下Oracle的任务队 ...