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的执 ...
随机推荐
- TCP/IP——基础概念简记
TCP/IP协议族的分层: 应用层 运输层 网络层 链路层 互联网地址(IP地址):互联网上的每个接口必须有一个唯一的Internet地址,它一定的结构,分为ABCDE五类.A类保留给政府机构,B类分 ...
- Hibernate.cfg.xml详解
在搭建Hibernate环境时需要配置Hibernate.cfg.xml配置文件,本文将想详细讲解配置文件的内容. 1.数据库连接信息 配置数据库驱动.(其中name为连接方式,我在这写jdbc的连接 ...
- Codeforces 196 E. Tricky and Cleve Password
\(>Codeforces \space 196\ E. Tricky\ and\ Cleve\ Password<\) 题目大意 : 给出一个有 \(n\) 个结点,\(m\) 条边的连 ...
- CVE-2017-7269—IIS 6.0 WebDAV远程代码执行漏洞分析
漏洞描述: 3月27日,在Windows 2003 R2上使用IIS 6.0 爆出了0Day漏洞(CVE-2017-7269),漏洞利用PoC开始流传,但糟糕的是这产品已经停止更新了.网上流传的poc ...
- C程序运行的背后（2）
话说上回说到,C程序运行之前,必须要加载到其进程地址空间中.今儿咱就扯扯这个加载到底是怎么加载的. 一图胜前言,这个图简单说明了可执行文件加载过程的逻辑流,在此只做粗粒度概要说明.需要准确描述的,请出 ...
- ROS知识（5）----消息与服务的示例
ROS中已经定义了较多的标准类型的消息,你可以用在这些标准类型的消息上再自定义自己的消息类型.这个在复杂数据传输很有用,例如节点和服务器进行交互时,就可能用到传输多个参数到服务器,并返回相应的结果.为 ...
- 【转】如何修改maven工程jdk版本
1.使用maven的时候,默认会使用1.5版本的JDK,并且也是编译成1.5的,我的电脑里面用的JDK是1.7的,1.8也出来了,没理由还用1.5的吧!所以我手动改成了1.7,郁闷的是,每次 mave ...
- extjs用iframe的问题
项目中用extjs做前提系统的界面是左边用树做目录 右边用tabpanel做内容展示点击树节点的时候 在tabpanel添加新的tab JScript code var newTab = center ...
- MOSFET pair makes simple SPDT switch
With an n- and p-channel MOSFET, you can easily implement a single-pole double-throw (SPDT) switch t ...
- Circuit translates I2C voltages
This Design Idea explores level-shifting an I2C bus from 5V/ground (positive domain) to ground/–5V ( ...