AngularJS實現一次監聽多個值發生的變化_AngularJS

一、$watch簡單使用

$watch是一個scope函數，用於監聽模型變化，當你的模型部分發生變化時它會通知你。

$watch(watchExpression, listener, objectEquality);

每個參數的說明如下：

watchExpression：監聽的對象，它可以是一個angular運算式如'name',或函數如function(){return $scope.name} 。

listener:當watchExpression變化時會被調用的函數或者運算式,它接收3個參數：newValue(新值), oldValue(舊值), scope(範圍的引用)

objectEquality：是否深度監聽，如果設定為true,它告訴Angular檢查所監控的對象中每一個屬性的變化. 如果你希望監控數組的個別元素或者對象的屬性而不是一個普通的值, 那麼你應該使用它

舉個栗子：

$scope.name = 'hello';var watch = $scope.$watch('name',function(newValue,oldValue, scope){    console.log(newValue);    console.log(oldValue);});$timeout(function(){    $scope.name = "world";},1000);

二、監聽多個值的變化

大家通常遇到的情況為通過$watch()一次監聽一個值的變化，當然這種時候滿足絕大部分情況。但是通過閱讀官網對於$watch()的解釋，$watch()還有第三個參數，第三個參數是一個布爾類型，表示是否深度監聽，深度監聽的例子就是是否進行比較對象的屬性。

這樣我們就可以實現一次監聽多個值的變化。

範例程式碼

var app=angular.module("watchApp",[])      .controller("watchController",["$scope",function($scope){         $scope.object={};         $scope.object.one=$scope.one;         $scope.object.one=$scope.one;         $scope.$watch("object",function(){            .....          },true);      }])

總結

以上就是關於AngularJS如何一次監聽多個值發生變化的全部內容，大家都學會了嗎？希望這篇文章的內容對大家的學習和工作能有所協助，如果有疑問可以留言交流，謝謝大家對雲棲社區的支援。