Angular中使用$watch監(jiān)聽object屬性值的變化(詳解)
Angular中的$watch可以監(jiān)聽屬性值的變化，然后并做出相應(yīng)處理。
常見用法：
$scope.$watch("person", function(n, o){
//todo something...
})
但是對(duì)于一個(gè)對(duì)象中的某個(gè)屬性值變化時(shí)，$watch似乎不管用了。
示例代碼：
<body>
<div ng-controller="mainCtrl">
<input id="myText" type="text" ng-model="person.name"/>
<h2>{{person}}</h2>
<h2>Status: {{status}}</h2>
</div>
<script>
angular.module('myApp', [])
.controller('mainCtrl', function ($scope) {
$scope.person = {
name:"allen",
age:21
}
$scope.$watch("person", function(n, o){
//取消第一次加載時(shí)的監(jiān)聽響應(yīng)
if(n == o){
return;
}
$scope.status = "changed"
})
})
</script>
</body>
我們?yōu)檩斎肟蚪壎藀erson對(duì)象的name屬性，然而當(dāng)我們改變輸入框的值時(shí)候，{{person}}確實(shí)改變了，然而并沒(méi)有出現(xiàn)我們想要的change字符。
效果：
我們需要為$watch方法額外添加一個(gè)true參數(shù)，使之達(dá)到我們想要的效果：
$scope.$watch("person", function(n, o){
if(n == o){
return;
}
$scope.status = "changed";
},true)
$watch方法完整的使用方式是這樣的：
$watch(watchExpression, [listener], [objectEquality]);
第一個(gè)是監(jiān)聽的參數(shù)名稱，剩下兩個(gè)可選參數(shù)分別為處理函數(shù)和是相等比較的方式，對(duì)于后者文檔如是說(shuō)：Compare for object equality using angular.equals instead of comparing for reference equality. 即是否使用angular.equals方法進(jìn)行比較。
如此效果變?yōu)椋?/strong>
以上這篇Angular中使用$watch監(jiān)聽object屬性值的變化(詳解)就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
AngularJS bootstrap啟動(dòng)詳解及實(shí)例代碼
這篇文章主要介紹了AngularJS bootstrap啟動(dòng)的知識(shí)，這里整理了相關(guān)資料及簡(jiǎn)單實(shí)例代碼，,需要的朋友可以參考下2016-09-09
AngularJS學(xué)習(xí)筆記之ng-options指令
ng-options是angular-1.3新出的一個(gè)指令,這篇文章就來(lái)介紹這個(gè)指令的用法.有需要的小伙伴可以參考下。2015-06-06
這篇文章主要為大家介紹了Angular應(yīng)用懶加載模塊配置管理詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-10-10
簡(jiǎn)介AngularJS的視圖功能應(yīng)用
這篇文章主要介紹了AngularJS的視圖功能應(yīng)用,包括ng-view和ng-template以及$routeProvider的使用，以及 $routeProvider 需要的朋友可以參考下2015-06-06
詳解angularjs4部署文件過(guò)大解決過(guò)程
這篇文章主要介紹了詳解angularjs4部署文件過(guò)大解決過(guò)程，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-12-12
這篇文章主要介紹了AngularJS 應(yīng)用模塊化的使用,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-04-04
簡(jiǎn)單實(shí)現(xiàn)AngularJS輪播圖效果
這篇文章主要教大家如何簡(jiǎn)單實(shí)現(xiàn)AngularJS輪播圖效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-02-02
詳解創(chuàng)建自定義的Angular Schematics
本文對(duì) Angular Schematics 進(jìn)行了介紹，并創(chuàng)建了一個(gè)用于創(chuàng)建自定義 Component 的 Schematics ，然后在 Angular 項(xiàng)目中以它為模板演練了通過(guò) Schematics 添加自定義的 Component，感興趣的小伙伴們可以參考一下2018-06-06
Angularjs過(guò)濾器實(shí)現(xiàn)動(dòng)態(tài)搜索與排序功能示例
這篇文章主要介紹了Angularjs過(guò)濾器實(shí)現(xiàn)動(dòng)態(tài)搜索與排序功能,涉及AngularJS過(guò)濾器相關(guān)搜索、查詢、排序操作技巧,需要的朋友可以參考下2017-12-12
angular和BootStrap3實(shí)現(xiàn)購(gòu)物車功能
這篇文章主要為大家詳細(xì)介紹了angular和BootStrap3實(shí)現(xiàn)購(gòu)物車功能的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-01-01