AnjularJS框架的监听$watch
当数组中的元素发生变化时想要得到实时数据 ,例如购物车内物品件数的变化与购物金额是相关联的,此时就需要监听物品的变化 用$watch进行监测
下面将对不同的监测对象做出详细分析
<script> var app=angular.module("myApp",[]); app.controller("myCtrl",function ($scope) { $scope.username="Marry"; $scope.name="sun"; $scope.age=14; $scope.users={ username:"sun", password:"123" } $scope.goodses=[ {goodsID:1,price:18}, {goodsID:2,price:20} ] //监听单个普通变量 $scope.$watch("username",function () { console.log("hello world"); //打开网页时会先执行一次代码 }) //监听多个普通变量 两个变量相加是Angular特有的语法结构 $scope.$watch("username+name",function () { console.log("hello hello"); }) //监听对象的数据 $scope.$watch("users.username",function () { console.log("world world"); }); //监听整个对象的数据 此时不要忘记加参数true 不加的话默认是false$scope.$watch("users",function () { console.log("you are wrong"); },true); // $watchCollection 监听数组数据而不监听数组中的数据 $scope.$watchCollection("goodses",function () { // 数组中的元素被增删改查时 就会发生变化 但是数组中的元素发生变化检测不到 }); //监听数组中的细节变化 修改前 VS 修改后 $scope.$watch("username",function (newvalue,oldvalue) { console.log("hello",newvalue,oldvalue); }) $scope.$watch("username",function (newvalue,oldvalue) { console.log("world",newvalue,oldvalue); }) //$watch可以重复被使用 不会被覆盖 都会执行 }) </script>