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的执 ...
随机推荐
- 看雪论坛 破解exe 看雪CTF2017第一题分析-『CrackMe』-看雪安全论坛
韩梦飞沙 韩亚飞 313134555@qq.com yue31313 han_meng_fei_sha 逆向 黑客 破解 学习 论坛 『CrackMe』 http://bbs.pediy.co ...
- android 网络
韩梦飞沙 韩亚飞 313134555@qq.com yue31313 han_meng_fei_sha android - async - http 安卓 异步 超文本传输协议 xUtil a ...
- JZYZOJ1237 教授的测试 dfs
http://172.20.6.3/Problem_Show.asp?id=1237 锻炼搜索的代码能力,不错的题. 开始对dfs到底向下传递什么搞不清楚,需要想一下,noip难度的题还有这种情况 ...
- HDU 6084 寻找母串（卡特兰数）
[题目链接] http://acm.hdu.edu.cn/showproblem.php?pid=6084 [题目大意] 对于一个串S,当它同时满足如下条件时,它就是一个01偏串: 1.只由0和1两种 ...
- 2017-2018-1 JAVA实验站 冲刺 day07
2017-2018-1 JAVA实验站 冲刺 day07 各个成员今日完成的任务 小组成员 今日工作 完成进度 张韵琪 写博客.进行工作总结 100% 齐力锋 部分按钮图片.对按钮图片进行ps 100 ...
- bzoj 2809: [Apio2012]dispatching -- 可并堆
2809: [Apio2012]dispatching Time Limit: 10 Sec Memory Limit: 128 MB Description 在一个忍者的帮派里,一些忍者们被选中派 ...
- char *p 与char p[]
char *p=a和char*p=&a 前者p是一个指针变量后者p是一个char型变量 char *p = "123"; 为全局数组,放在常量区,而非普通数据段(静态存储区 ...
- xcode的ios工程目录结构复习
目录结构: a.supporting files: main.m和资源文件 xxx-info.plist:包含应用程序相关属性列表,如版本,程序名等 .pch文件:预编译头文件,相当于MFC里的std ...
- java常用工具方法2
/* * Copyright 2005 Joe Walker * * Licensed under the Apache License, Version 2.0 (the "License ...
- POJ 1286 Necklace of Beads（Polya简单应用）
Necklace of Beads 大意:3种颜色的珠子,n个串在一起,旋转变换跟反转变换假设同样就算是同一种,问会有多少种不同的组合. 思路:正规学Polya的第一道题,在楠神的带领下,理解的还算挺 ...