溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹Angular中如何使用$watch監聽object屬性值，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！
Angular中的$watch可以監聽屬性值的變化，然后并做出相應處理。
常見用法：
$scope.$watch("person", function(n, o){
//todo something...
})但是對于一個對象中的某個屬性值變化時，$watch似乎不管用了。
示例代碼：
<body>
<div ng-controller="mainCtrl">
<input id="myText" type="text" ng-model="person.name"/>
<h3>{{person}}</h3>
<h3>Status: {{status}}</h3>
</div>
<script>
angular.module('myApp', [])
.controller('mainCtrl', function ($scope) {
$scope.person = {
name:"allen",
age:21
}
$scope.$watch("person", function(n, o){
//取消第一次加載時的監聽響應
if(n == o){
return;
}
$scope.status = "changed"
})
})
</script>
</body>我們為輸入框綁定了person對象的name屬性，然而當我們改變輸入框的值時候，{{person}}確實改變了，然而并沒有出現我們想要的change字符。
效果：
我們需要為$watch方法額外添加一個true參數，使之達到我們想要的效果：
$scope.$watch("person", function(n, o){
if(n == o){
return;
}
$scope.status = "changed";
},true)$watch方法完整的使用方式是這樣的：
$watch(watchExpression, [listener], [objectEquality]);
第一個是監聽的參數名稱，剩下兩個可選參數分別為處理函數和是相等比較的方式，對于后者文檔如是說：Compare for object equality using angular.equals instead of comparing for reference equality. 即是否使用angular.equals方法進行比較。
如此效果變為：
以上是“Angular中如何使用$watch監聽object屬性值”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
