$scope里的$watch方法

柔情只为你懂 2022-08-28 10:50 196阅读 0赞

html：

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    <script src="../vendor/angular/angular.js"></script>
    <script src="app/index.js"></script>
    
    <body>
        <div ng-app="myapp" ng-controller="mycntroller">
            <input type="text" ng-model="name"> {
       {name}}{
       {count}}
        </div>
    </body>
    
    </html>

var app = angular.module('myapp', []);
    app.controller('mycntroller', function($scope) { 
        $scope.name = "转账"
        $scope.count = 0;
    
        $scope.$watch('name', function(newValue, oldValue) { 
            ++$scope.count;
            console.log(newValue, oldValue, $scope.count)
            if ($scope.count >= 10) { 
                $scope.name = "数据已经大于100万了";
            }
        })
    
        //监听对象()
        $scope.data = { 
                name: "李四",
                count: 20
            }
            //加true可以检查对象里面的属性，否则只该属性
        $scope.$watch('data', function(newValue, oldValue) { 
            console.log(newValue, oldValue, "旧的watch");
        }, true);
    
    })

效果图：

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5L2g55qE576O77yM6K6p5oiR55e06L-3_size_14_color_FFFFFF_t_70_g_se_x_16]

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5L2g55qE576O77yM6K6p5oiR55e06L-3_size_14_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/bc7733f386b04379939a942b3c37df13.png

发表评论取消回复

表情：

评论列表（有 0 条评论，196人围观）

还没有评论，来说两句吧...

相关阅读

相关 angular , $state、$watch、$scope、$rootScope分别是什么？

angular , $state、$watch、$scope、$rootScope分别是什么？背景介绍在平时的编码中，我们总会想着有什么方法能够简化我们的

曾经终败给现在/ 2024年03月16日 22:28/ 0 赞/ 25 阅读

相关 maven pom.xml 里scope的作用

[maven pom.xml 里scope的作用][maven pom.xml _scope] <dependency>中<scope>，它主要管理依赖的部署。目前<sc

逃离我推掉我的手/ 2023年06月08日 06:53/ 0 赞/ 1 阅读

相关前端学习日记Vue：watch选项与$watch实例方法

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

秒速五厘米/ 2023年06月07日 05:52/ 0 赞/ 11 阅读

相关 vuejs里的watch的新值和旧值区分

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIy

末蓝、/ 2022年11月12日 09:41/ 0 赞/ 155 阅读

相关 $scope里的$apply,$digest的方法使用

页面代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="U

妖狐艹你老母/ 2022年09月13日 11:28/ 0 赞/ 112 阅读

相关 $scope里的$watch方法

html： <!DOCTYPE html> <html lang="en"> <head> <meta charset="U

柔情只为你懂/ 2022年08月28日 10:50/ 0 赞/ 197 阅读

相关 [angular]服务之2$scope之$watch、$watchGroup、$watchCollection

<!DOCTYPE html> <html lang="en" ng-app="testServiceScopeWatch"> <head>

Bertha 。/ 2022年07月13日 04:43/ 0 赞/ 160 阅读

相关【AngularJS】4.AngularJS $scope里面的$apply方法和$watch方法

1. Angularjs $scope 里面的$apply 方法 (1)$apply 方法作用： Scope 提供$apply 方法传播 Model 的变化。 (2)$a

朴灿烈づ我的快乐病毒、/ 2022年06月18日 02:24/ 0 赞/ 172 阅读

相关 @Scope注解的使用方法

@Scope注解 > @Scope注解的目的是用来调节作用域 @Scope("prototype")//多实例，IOC容器启动创建的时候，并不会创建对象放在容器

怼烎@/ 2022年02月25日 03:08/ 0 赞/ 180 阅读

相关 Angular 事件监听$scope.$watch

监听服务$watch 1、不需要在控制器脚本中注入,直接使用 2、监听任何想要监听的NG变量的值,并在这个值改变的时候调用回调函数

朴灿烈づ我的快乐病毒、/ 2021年07月25日 02:43/ 0 赞/ 650 阅读