AngularJS之$watch方法（监控动作）

最新推荐文章于 2021-04-13 14:25:40 发布
最新推荐文章于 2021-04-13 14:25:40 发布
阅读量523 收藏
点赞数
文章标签： javascript ViewUI

1、问题背景

AngularJS中的$watch方法来监听数据变化


2、实现源码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>AngularJS之$watch方法（监控动作）</title>
		<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
		<style>
			body{
				font-size: 12px;
				font-family: "微软雅黑";
				background-color: #F8EFC0;
				backface-visibility: visible;
			}
			div{
				margin: 10px 10px 10px 10px;
			}
		</style>
		<script>
			var app = angular.module("watchApp",[]);
			app.controller("watchCon",['$scope',function($scope){
				$scope.count = 0;
				$scope.username = "";
				$scope.$watch('username',function(){
					$scope.count++;
				});
			}]);
		</script>
	</head>
	<body ng-app="watchApp">
		<div ng-controller="watchCon">
			<div>
				<input type="text" id="username" ng-model="username" maxlength="12" autocomplete="on"/>
			</div>
			<div>
				{{count}}
			</div>
		</div>
	</body>
</html>

3、实现结果

（1）初始化


（2）改变输入框值


iteye_8264
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Angular.js中使用$watch监听模型变化
raquelle的记忆宫殿
05-14 2466
原文链接： http://yuankeqiang.lofter.com/post/8de51_1454f93 http://blog.csdn.net/u010451286/article/details/50635839 $watch简单使用 $watch是一个scope函数，用于监听模型变化，当你的模型部分发生变化时它会通知你。 $watch(watchExpre
angularjs $watch方法使用
fandongbao的专栏
06-21 395
$scope.$watch(function(nv,ov){ var item=sessionStorage.getItem("item"); if(nv&&item){ var myForm=nv.$$childTail.myForm; if(myForm){ var value=myForm.value; if(value&&!Number.isNaN(value.$modelValue)){ $scope.value=value.$modelValue; }}} }.
watch 用法：
weixin_45677987的博客
04-13 524
1： watch： watch () { uploadDialogVisible(e) { // e 打印为true为 false; if (!e) { this.file = {}; this.$refs['uploadAttr'].clearFiles(); } } } 如果为false: 则清空数据： watch: 用法就是异步操作或者开销比较大的操作。 ...
angularjs中 $watch 和$on 2种监听的区别？
weixin_33971130的博客
07-10 224
1.$watch简单使用 $watch是一个scope函数，用于监听模型变化，当你的模型部分发生变化时它会通知你。 $watch(watchExpression, listener, objectEquality); 每个参数的说明如下： watchExpression：监听的对象，它可以是一个angular表达式如'name',或函数如function(){return $...
深究AngularJS——监听模型$watch
爱雨轩
05-12 1万+
前言1.$watch是scope内置的函数，它的作用是用来监听数据的变化。 2.$watch可监听哪些数据？ 单个对象的属性 需要计算的结果（函数） 3. 语法: $scope.$watch(F,M,B);对$watch参数的了解F：要监听的数据（表达式或函数的字符串），主要是监听这些数据改变没有。它会返回被监听数据的当前值。M：当监听的数据发生变化时，就会调用M（它是函数或
AngularJS中$apply方法和$watch方法用法总结
11-27
本文实例总结了AngularJS中$apply方法和$watch方法用法。分享给大家供大家参考，具体如下： 引言 最近在项目中封装控件的时候用到了$watch方法来监听module中的值的变化，当时小编对这个方法不是很了解，所以在网上...
angularjs 中$apply，$digest，$watch详解
10-21
在AngularJS中，$apply，$digest和$watch是核心的脏检查机制，它们共同确保了模型和视图之间的同步。下面将详细解释这三个概念及其工作原理。 1. **$apply (通知)** `$apply`是AngularJS提供的一个方法，它的主要...
浅谈angularJS的$watch失效问题的解决方案
01-19
本文介绍了浅谈angularJS的$watch失效问题的解决方案，分享给大家，顺便给自己留个笔记 $watch方法，它可以帮助我们在每个scope中监视其中的变量。 $watch 单一的变量 对于普通的变量时，如数字，字符串等，直接如下...
AngularJS中$watch和$timeout的使用示例
10-21
给大家介绍了AngularJS中$watch和$timeout的使用例子，通过示例代码相信更能让大家理解，有需要的朋友们下面来一起看看吧。
AngularJS中的$watch监听事件
SanPhantom的博客
10-24 7745
AngularJS中的$watch监听事件 本篇介绍angular的另一个应用—监听事件，该监听功能是angular自带的，也比较实用。监听功能定义在了scope里，前面说过，scope里，前面说过，scope里，前面说过，scope就相当于作用域，表示在当前页面有效，当然， 你也可以把理解为一个空间或一个容器，angular的作者往这个容器里定义了很多方法，$watch就是其中之一。 所谓监听，...
关于angularJS的$watch的 一些小用法
热门推荐
u010451286的博客
02-04 4万+
$watch方法，它可以帮助我们在每个scope中监视其中的变量。$watch 单一的变量对于普通的变量时，如数字，字符串等，直接如下写是可以监视到变量的变化，并执行相应的函数的。$scope.count=1; $scope.$watch('count',function(){ ... });$watch 多个变量对于多个变量的监视变化，执行同一函数的话，可以将这几个变量转为字符串，以‘+’号隔开来
angularjs数据监听的两种方法
me_never的博客
01-01 7345
在angularjs中有时候路由跳转比值的传递或者赋值快一些，导致页面已经跳转了，而值还没有过来，进而会导致一些报错，所以就需要去监听某些关键的参数。 第一种方法：angularjs的$watch &amp;amp;amp;lt;div ng-controller=&amp;amp;quot;myCtrl&amp;amp;quot;&amp;amp;amp;gt; &amp;amp;amp;lt;input type=&amp;amp;quot;te
angular实时监控技术
张姐姐聊编程
07-21 2065
最近项目中需要根据一个按钮的状态变化去改变操作另外的一个按钮的变化，该如何实现呢，只能够是实时监控了吧。下面来了解一下angular的实时监控技术。
angular中如何监控页面加载完毕
superjunjin的专栏
11-26 2万+
一，网上一些不起作用的方法1，在controller里面利用on或者on或者watch$scope.$on('$viewContentLoaded', function() { alert('1'); }); $scope.$watch('$viewContentLoaded', function() { alert('1'); }); 2，利用data-ng-i
angularJS $scope.$watch的使用
iteye_920的博客
05-10 806
$watch是一个scope函数，用于监听模型变化，当你的模型部分发生变化时它会通知你。 $watch(watchExpression, listener, objectEquality); 每个参数的说明如下： 引用：[url]http://yuankeqiang.lofter.com/post/8de51_1454f93[/url] watchExpression：...
Angular中使用$watch监听object属性值的变化
justforuse的博客
08-18 1万+
Angular中的$watch可以监听属性值的变化，然后并做出相应处理。 常见用法：$scope.$watch("person", function(n, o){ //todo something... })但是对于一个对象中的某个属性值变化时，$watch似乎不管用了。 示例代码：<body> <div ng-controller="mainCtrl"> <in
$watch--angularJs的监听事件
路迷
04-12 7851
上一篇介绍了angular的一个应用----双向数据绑定，本篇介绍angular的另一个应用---监听事件，该监听功能是angular自带的，也比较实用。监听功能定义在了$scope里，前面说过，$scope就相当于作用域，表示在当前页面有效，当然， 你也可以把理解为一个空间或一个容器，angular的作者往这个容器里定义了很多方法，$watch就是其中之一。 所谓监听，就是指当被监听的对象发生
angular中$watch的简单使用
陪你上房揭瓦的博客
11-22 1209
$watch的用法$watch是$scope中的一个函数，作用是用来监听模型中值的变化，当值发生变化时候，他就会运行相应的函数$scope.$watch(watchExpresssion,listener,flag)1 watchExpression是监听的对象2 listener是监听函数，当watchExpression发生变化的时候运行；他有两个参数old和now；function
angularjs 1.6.9 $watch
最新发布
05-26
在 AngularJS 1.6.9 中，$watch 是一个作用域方法，用于监视模型的变化。它的语法如下： ``` $watch(watchExpression, listener, [objectEquality]); ``` 其中，watchExpression 是一个字符串或者一个函数，它指定了需要监视的模型；listener 是一个回调函数，在监视的模型发生变化时被调用；objectEquality 是一个布尔值，用于指定是否使用对象比较来检测模型变化。 例如，以下代码会在作用域中添加一个名为 name 的模型，并通过 $watch 方法监视该模型的变化： ``` $scope.name = 'John'; $scope.$watch('name', function(newValue, oldValue) { console.log('Name changed from ' + oldValue + ' to ' + newValue); }); ``` 当 $scope.name 的值发生变化时，$watch 方法会自动调用监听器函数，并传递新值和旧值作为参数。在上面的例子中，如果将 $scope.name 的值改为 "Mary"，则会在控制台输出 "Name changed from John to Mary"。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值