zoukankan      html  css  js  c++  java
  • AngularJS之$watch方法(监控动作)

    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)改变输入框值

         

  • 相关阅读:
    python GUI
    Python 博客网站资源
    Python 100 天学习计划
    pycharm基本设置
    MySQL 57安装部署(Zip版)(Windows版)
    nginx在centos下的安装
    仓位计算
    python笔记
    vue(一)--监听事件
    Hibernate(五)--级联
  • 原文地址:https://www.cnblogs.com/hzcya1995/p/13314072.html
Copyright © 2011-2022 走看看