ng 監聽數據的變化
阿新 • • 發佈：2017-06-06
style 例子 代碼 ctype user src $scope angular round
$scope.$watch(‘監聽的變量的名稱‘,
func)
在angularJs之所以能夠實現綁定，是因為angularJS框架在背後為每一個模型數據添加了一個監聽，與$watch其實是一個道理。
結果：
代碼：
<html ng-app="myModule"> <head lang="en"> <meta charset="UTF-8"> <script src="js/angular.js"></script> <title></title> </head> <body> <div ng-controller="myCtrl"> <input type="text" ng-model="kw"/> </div> <script> var app=angular.module(‘myModule‘,[‘ng‘]); app.controller(‘myCtrl‘,function($scope){ $scope.kw = ‘‘; //監聽模型數據的變化 $scope.$watch(‘kw‘,function (newVal,oldVal) { console.log("newVal is "+newVal+ " oldval is "+oldVal); }) }) </script> </body> </html>
例子：通過MVC實現一個SPA，在view有一個textarea（留言本），有一個select（選擇顏色rgb）,有一個checkbox(是否同意)，通過$watch監聽每一個輸入組件的選擇結果並通過控制臺輸出日誌信息。
效果：
代碼：
<!DOCTYPE html> <html ng-app="myApp"> <head lang="en"> <meta charset="UTF-8"> <script src="js/angular.js"></script> <title></title> </head> <body> <div ng-controller="myCtrl"> 請輸入留言內容： <textarea ng-model="user_msg"></textarea> <br/> 選擇喜歡的顏色: <select ng-model="user_color"> <option value="r">紅色</option> <option value="g">綠色</option> <option value="b">藍色</option> </select> <br/> 是否同意 <input type="checkbox" ng-model="user_agree"/> </div> <script> var app = angular.module(‘myApp‘, [‘ng‘]); app.controller(‘myCtrl‘, function ($scope) { console.log(‘myCtrl func is called‘); $scope.user_msg = ""; $scope.user_color=‘r‘; $scope.user_agree = true; $scope.$watch(‘user_msg‘, function (newVal,oldVal) { console.log(newVal); console.log($scope.user_msg); }) $scope.$watch(‘user_color‘, function () { console.log($scope.user_color); }) $scope.$watch(‘user_agree‘, function () { console.log($scope.user_agree); }) console.log($scope); }) </script> </body> </html>
ng 監聽數據的變化