AngularJS之$watch方法(监控动作)
程序员文章站
2023-12-31 10:09:52
...
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",['$scope',function($scope){ $scope.count = 0; $scope.username = ""; $scope.$watch('username',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>
3、实现结果
(1)初始化
(2)改变输入框值
以上就是AngularJS之$watch方法(监控动作)的内容,更多相关内容请关注PHP中文网(www.php.cn)!
推荐阅读
-
vue之watch属性使用方法
-
AngularJS中$apply方法和$watch方法用法总结
-
对angular 监控数据模型变化的事件方法$watch详解
-
angularJS自定义directive之带参方法传递详解
-
AngularJS双向数据绑定原理之$watch、$apply和$digest的应用
-
Angularjs之ngModel中的值验证绑定方法
-
FTP服务器详解之监控ftp服务器、上传文件到ftp服务器、ftp文件监控的方法
-
Angularjs之如何在跨域请求中传输Cookie的方法
-
angularJS自定义directive之带参方法传递详解
-
对angular 监控数据模型变化的事件方法$watch详解