实例3:监听方法
//1.使用$watch来监视对象
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope) {
$scope.user = { name: '张三', age: 10 };
$scope.updated = 0;
//使用监视方法,监视对象的部分属性
$scope.$watch(function () {
//监视方法,的值修改就会触发
var newValue = $scope.user.age + ' ' + $scope.user.name;
return newValue;
}, function (newValue, oldValue) {
console.info(newValue);
});
//使用2
function loopOne() {
console.info($scope.user.name);
}
$scope.$watch(function () {
return $scope.user.name;
}, loopOne);
});
1.Angular.Js $scope对象的$watch方法,三个参数
实例1:监听属性
<div class="container" ng-app="myApp" ng-controller="myCtrl">
<form>
<div class="form-group">
<label>姓名:</label>
<input class="form-control" ng-model="name" />
</div>
</form>
<div class="alert alert-danger">
姓名:{{name}}
<br />
修改次数{{updated}}
</div>
</div>
<script type="text/javascript">
//1.使用$watch来监视属性
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope) {
$scope.name = "张三";
$scope.updated = 0;
$scope.$watch('name', function () {
$scope.updated++;
console.info($scope.updated);
});
});
</script>
实例2:获取更新时的新值或旧值
<div class="container" ng-app="myApp" ng-controller="myCtrl">
<form>
<div class="form-group">
<label>姓名:</label>
<input class="form-control" ng-model="name" />
</div>
</form>
<div class="alert alert-danger">
姓名:{{name}}
<br />
修改次数{{updated}}
</div>
</div>
<script type="text/javascript">
//1.使用$watch来监视属性
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope) {
$scope.name = "张三";
$scope.updated = 0;
$scope.$watch('name', function (newValue, oldValue) {
console.info('new:'+newValue+"----old:"+oldValue);
if (newValue == oldValue)
return;
$scope.updated++;
});
});
</script>
实例3:监听自定义对象
<div class="container" ng-app="myApp" ng-controller="myCtrl">
<form>
<div class="form-group">
<label>姓名:</label>
<input class="form-control" ng-model="user.name" />
</div>
</form>
<div class="alert alert-danger">
姓名:{{user.name}}
<br />
修改次数{{updated}}
</div>
</div>
<script type="text/javascript">
//1.使用$watch来监视对象
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope) {
$scope.user = { name: '张三' };
$scope.updated = 0;
$scope.$watch('user', function (newValue, oldValue) {
console.info(newValue);
console.info(oldValue);
if (newValue == oldValue)
return;
$scope.updated++;
}, true);
});
</script>