简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Maison > interface Web > js tutoriel > le corps du texte

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

黄舟
Libérer： 2017-02-18 13:36:16
original
1157 Les gens l'ont consulté

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;
			}
			p{
				margin: 10px 10px 10px 10px;
			}
		</style>
		<script>
			var app = angular.module("watchApp",[]);
			app.controller("watchCon",[&#39;$scope&#39;,function($scope){
				$scope.count = 0;
				$scope.username = "";
				$scope.$watch(&#39;username&#39;,function(){
					$scope.count++;
				});
			}]);
		</script>
	</head>
	<body ng-app="watchApp">
		<p ng-controller="watchCon">
			<p>
				<input type="text" id="username" ng-model="username" maxlength="12" autocomplete="on"/>
			</p>
			<p>
				{{count}}
			</p>
		</p>
	</body>
</html>
Copier après la connexion


3、实现结果

（1）初始化

      1175.png

（2）改变输入框值

      1176.png

 以上就是AngularJS之$watch方法（监控动作）的内容，更多相关内容请关注PHP中文网（www.php.cn）！


Étiquettes associées：
$watch angularjs
source：php.cn
Article précédent：AngularJS之依赖注入（实例一） Article suivant：My97DatePicker默认赋值
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Derniers numéros
En cliquant sur le bouton, le formulaire sera actualisé. J'ai un formulaire en Angular avec deux étiquettes de boutons. Un bouton soumet le formula...
Depuis 2023-08-14 20:46:02
0
2
205
Qu'est-ce que la version angulaire ? /** * @license AngularJS v1.7.5 * (c) 2010-2018 Google, Inc. http://angularjs.org * Licenc...
Depuis 2018-10-17 22:49:39
0
0
966
javascript - Comment AngularJS interroge-t-il le menu de deuxième niveau en fonction du menu de premier niveau? Interrogez l'industrie secondaire via l'industrie primaire et interrogez l'industrie prima...
Depuis 2017-07-07 10:34:54
0
4
1254
javascript - Je suis nouveau sur AngularJS+express et / dans le chemin de routage est converti en %2F, ce qui rend le chemin invalide. Pouvez-vous me dire pourquoi ? La page s'ouvre comme suit. Cliquez sur le lien de l'ordinateur et le chemin de l'URL s'af...
Depuis 2017-07-05 11:07:44
0
1
867
javascript - L'URL AngularJS du routeur ui s'affiche normalement et la page ne change pas ? Apprenez AngularJS et ajoutez automatiquement list.html à ui-routerindex.html. Cliquez sur...
Depuis 2017-07-05 11:06:15
0
1
739
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！