AnjularJS框架的监听$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>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值