ng 監聽數據的變化


 

$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>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM