關(guān)于angular js_$watch監(jiān)控屬性和對(duì)象詳解
$Watch：(監(jiān)聽(tīng)一個(gè)model,當(dāng)一個(gè)model每次改變時(shí)，都會(huì)觸發(fā)第二個(gè)函數(shù))
$watch('watchFn',watchAction,deepWatch)
watchFn：帶有Angular 表達(dá)式或者函數(shù)的字符串，它會(huì)返回被監(jiān)控的數(shù)據(jù)模型的當(dāng)前值。
watchAction： 一個(gè)函數(shù)function(newValue,oldValue){},當(dāng)watchFn 發(fā)生變化時(shí)會(huì)被調(diào)用
deepWatch：默認(rèn)為false，監(jiān)聽(tīng)數(shù)組的某個(gè)元素或者對(duì)象的屬性時(shí)設(shè)置為true;
監(jiān)控一個(gè)屬性：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<form>
<div class="form-group">
<input ng-model="name" />{{name}}
<p>改變次數(shù){{count}}</p>
</div>
</form>
</div>
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope){
$scope.name = '橘子';
$scope.count = 0;
$scope.$watch('name', function (newValue, oldValue) {
$scope.count++;
if($scope.count >5){
$scope.name = '蘋(píng)果';
}
});
});
</script>
</body>
</html>
監(jiān)控一個(gè)對(duì)象（deepWidth為true）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<form>
<div class="form-group">
<input ng-model="Data.name" />{{Data.name}}
<p>改變次數(shù){{count}}</p>
</div>
</form>
</div>
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope){
$scope.Data = { name: '橘子' };
$scope.count = 0;
$scope.$watch('Data', function (newValue, oldValue) {
if(newValue == oldValue)
return;
$scope.count++;
if($scope.count >5){
$scope.Data.name = '蘋(píng)果';
}
}, true);
});
</script>
</body>
</html>
以上這篇關(guān)于angular js_$watch監(jiān)控屬性和對(duì)象詳解就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
使用AngularJS對(duì)表單提交內(nèi)容進(jìn)行驗(yàn)證的操作方法
AngularJS是一款優(yōu)秀的前端JS框架，已經(jīng)被用于Google的多款產(chǎn)品當(dāng)中。下面通過(guò)本文給大家分享使用AngularJS對(duì)表單提交內(nèi)容進(jìn)行驗(yàn)證的操作方法，需要的的朋友參考下吧2017-07-07
這篇文章主要介紹了淺析webapp框架AngularUI的demo以及對(duì)demo的簡(jiǎn)單修改，需要的朋友可以參考下2014-12-12
Ionic + Angular.js實(shí)現(xiàn)圖片輪播的方法示例
圖片輪播在我們?nèi)粘ｉ_(kāi)發(fā)中是再熟悉不過(guò)的了，下面這篇文章主要給大家介紹了Ionic + Angular實(shí)現(xiàn)圖片輪播的方法，文中給出了詳細(xì)的示例代碼供大家參考學(xué)習(xí)，需要的朋友們下面來(lái)一起看看吧。2017-05-05
解決angular雙向綁定無(wú)效果,ng-model不能正常顯示的問(wèn)題
今天小編就為大家分享一篇解決angular雙向綁定無(wú)效果,ng-model不能正常顯示的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-10-10
對(duì)angularjs框架下controller間的傳值方法詳解
今天小編就為大家分享一篇對(duì)angularjs框架下controller間的傳值方法詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-10-10
我們?cè)趹?yīng)用的頁(yè)面或者組件需要加載數(shù)據(jù)時(shí)，瀏覽器和angular渲染頁(yè)面都需要消耗一定的時(shí)間。這里的間隔可能很小，甚至讓人感覺(jué)不到區(qū)別；但也可能很長(zhǎng)，這樣會(huì)導(dǎo)致讓我們的用戶看到了沒(méi)有被渲染過(guò)的頁(yè)面。本文將介紹Angular.js中處理頁(yè)面閃爍的方法。2017-03-03
淺析如何利用angular結(jié)合translate為項(xiàng)目實(shí)現(xiàn)國(guó)際化
利用angular進(jìn)行國(guó)際化轉(zhuǎn)換時(shí)利用【ng-bind-html】來(lái)進(jìn)行語(yǔ)言的翻譯是接近幾乎比較完美的方案，不會(huì)像利用【{{}}】模式，當(dāng)頁(yè)面加載緩慢時(shí)導(dǎo)致頁(yè)面太丑。本文對(duì)其實(shí)現(xiàn)方法進(jìn)行介紹，有需要的朋友可以看下2016-12-12
這篇文章主要為大家詳細(xì)介紹了AngularJS控制器的使用方法，感興趣的小伙伴們可以參考一下2016-03-03
AngularJs ng-route路由詳解及實(shí)例代碼
這篇文章主要介紹了AngularJs ng-route路由,這里整理相關(guān)資料及簡(jiǎn)單實(shí)例代碼，有興趣的小伙伴可以參考下2016-09-09
基于Angular 8和Bootstrap 4實(shí)現(xiàn)動(dòng)態(tài)主題切換的示例代碼
這篇文章主要介紹了基于Angular 8和Bootstrap 4實(shí)現(xiàn)動(dòng)態(tài)主題切換的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02