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