AnjularJS框架的监听$watch_$scope.$watch监听两个变量并集-优快云博客

本文介绍了AngularJS框架中$watch方法的使用方法，通过实例展示了如何监听不同类型的变量变化，包括普通变量、对象属性及数组等，并演示了监听前后值的变化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>