第六讲:index$watch.html

来源：互联网发布：百度网络硬盘登陆编辑：程序博客网时间：2024/05/28 05:16

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/lib/AngularJS/angular.min.js"></script>
</head>
<body>
<div ng-controller="myCtrl">
<input type="text" ng-model="username">
用户输入：{{username}}
</div>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.username = "administrator";
$scope.name = "tom";
$scope.age = 48;
$scope.users = {
username:"admin",
password:"123"
}
$scope.goodses = [
{goodsID:1, goodsName:"商品A"},
{goodsID:2, goodsName:"商品B"},
{goodsID:3, goodsName:"商品C"}
]
// 1. 监听单个普通变量
$scope.$watch("name", function() {
// TODO name属性发生变化执行的函数代码
})
// 2. 监听多个变量
$scope.$watch("name + age", function() {
// TODO name或者age变量的数据发生变化执行的函数代码
})
// 3. 监听对象的数据
$scope.$watch("users.username", function() {
// TODO usres对象中的username属性一旦发生变化执行的函数代码
})
// 4. 监听对象的所有属性
$scope.$watch("users", function() {
// TODO 监听users对象的所有属性，任一属性值发生变化执行函数代码
},true)
// 5. 监听数组数据~而不监听数组中的对象数据
$scope.$watchCollection("goodses", function() {
// TODO 一旦goodses数组中的元素，被删除、添加时执行函数的代码
})
// 6. 监听数据发生变化的细节：修改前 VS 修改后
$scope.$watch("username", function(newValue, oldValue) {
console.log("数据被修改了", newValue, oldValue);
})
// 7. $watch可以重复，不会被覆盖，都会执行！
$scope.$watch("username", function(newValue, oldValue) {
console.log("data changed:", newValue, oldValue);
})
});
/*
$scope对象上，有一个$watch()函数，用于监听模型数据的变化
*/
</script>
</body>
</html>

0 0