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的执 ...
随机推荐
- javascript函数笔记
函数是一个具有特定功能的语句块.函数的定义使用关键字 function,语法如下: function funcName ([parameters]){ statements; [return表达式;] ...
- FastReport.Net使用：[7]打印空白行
方法一:使用子报表的最少数据行属性 1.以前面的[简单报表一]为例,右键“数据区”在右键菜单中选择“Add Child Band”菜单添加子报表. 2.为原报表添加一列[序号],使用系统变量中的行号( ...
- 【MPI】矩阵向量乘法
输入作乘法的次数K 然后输入矩阵和向量的维度n 然后输入一个n维向量 然后输入K个n阶方阵 程序会给出该向量连续与此K个方阵做乘法后的结果 主要用了MPI_Gather, MPI_Allgather, ...
- ZOJ 3256 Tour in the Castle 插头DP 矩阵乘法
题解 这题是一道非常好的插头题,与一般的按格转移的题目不同,由于m很大,要矩阵乘法,这题需要你做一个按列转移的插头DP. 按列转移多少与按格转移不同,但大体上还是基于连通性进行转移.每一列只有右插头是 ...
- Codeforces Round #245 (Div. 2) B. Balls Game 并查集
B. Balls Game Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/430/problem ...
- 编程经验（C#）
本文记录我在编程里学到的一些小技巧,遇到了就记录一下. 1.如果通用接口中的回调没有参数,而调用时需要参数,这个时候可以用匿名函数多封装一层.例如: Private void Main() { Fun ...
- activemq 消息传送测试
activemq 5.10.0,topic messagelength字符 20000011 发送时间 接收时间 传送时间 毫秒 1 1443067284128 1443067288325 ...
- The method setClass(Context, Class<?>) in the type Intent is not applicable for the arguments (GameV
在当前短信内容的activity中写 Bundle bun = new Bundle(); bun.putString("message", ...
- [Projet] Module NFC
http://www.f4grx.net/projet-module-nfc/ The NFC is a contactless communication technology, which is ...
- POJ 1293 - Duty Free Shop 01背包记录所选物品
裸的01背包.dp[x]只要是bool型记录当前空间是否可用.. 而为了找到用了哪些物品..dp[x]设置为int型..进行记录.. Program: #include<iostream> ...