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的执 ...
随机推荐
- cloudstack ssvm 管理地址不够造成无法启动修复过程
cloudstack日志记录: 上面已经提示了,管理ip没有了,造成这个原因很多,遇到过ssvm非正常关闭就有可能不释放IP慢慢把IP消耗掉.总之这肯定是BUG.按照上面的提示找到对应pod 和dc ...
- java8新特性——并行流与顺序流
在我们开发过程中,我们都知道想要提高程序效率,我们可以启用多线程去并行处理,而java8中对数据处理也提供了它得并行方法,今天就来简单学习一下java8中得并行流与顺序流. 并行流就是把一个内容分成多 ...
- NOIP初赛前一日记
2018年10月12日,早晨7:25于机房. 早晨的鄞中,晨风还有点清冷.看着电脑上翻遍的资料,心里实在是有一种说不出的感觉. 说出来也算是丢脸——作为浙江选手,我为了NOIP2018的初赛,停课了一 ...
- luoguP3317 [SDOI2014]重建 变元矩阵树定理 + 概率
首先,我们需要求的是 $$\sum\limits_{Tree} \prod\limits_{E \in Tree} E(u, v) \prod\limits_{E \notin Tree} (1 - ...
- centos 7 修改ssh登录端口
在阿里云上面使用的oneinstack镜像,默认是使用的22端口,每次登录总会发现有人在暴力破解我的服务器,所以想想还是修改一下比较安全. 1.在防火墙打开新的端口 iptables -I INPUT ...
- CXF和Axis2的区别
1.CXF支持 WS-Addressing,WS-Policy, WS-RM, WS-Security和WS-I Basic Profile.Axis2不支持WS-Policy,但是承诺在下面的版本支 ...
- 【原创】MySQL+MyEclipse+对象映射文件，schema与category的关系
(一) 1.映射文件的类如下写法:class name="com.sanqing.po.SysUser" table="sys_user" catalog=& ...
- Spring MVC - Hello World示例
以下示例演示如何使用Spring MVC框架编写一个简单的基于Web的Hello World应用程序.首先使用Eclipse IDE,并按照以下步骤使用Spring Web Framework开发一个 ...
- Spring EL运算符实例
Spring EL支持大多数标准的数学,逻辑和关系运算符. 例如, 关系运算符 – 等于 (==, eq), 不等于 (!=, ne), 小于 (<, lt), 小于或等于 (<= , l ...
- 測试oracle 11g cluster 中OLR的重要性
測试oracle 11g cluster 中OLR的重要性 called an Oracle Local Registry (OLR): each node in a cluster has a ...