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