Angularjs[7] - $scrope 中 $watch 方法

最新推荐文章于 2025-05-15 17:16:07 发布

weixin_34001430

最新推荐文章于 2025-05-15 17:16:07 发布

阅读量129

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/bky-1083/p/6352267.html

本文介绍了AngularJS中$watch指令的功能与使用方法，通过一个简单的示例展示了如何利用$watch来跟踪输入框中值的变化，并实现计数功能。同时探讨了如何设置深层监听以监测对象内部属性的变化。

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div ng-app>
        <div ng-controller="firstController">
            <input type="text" value="" ng-model="name">
            改变次数：{{count}}--{{name}}
        </div>
    </div>
    <script type="text/javascript" src="app/index.js"></script>
<script type="text/javascript" src="../../vendor/angular/angularjs.js"></script>
</body>
</html>

var firstController = function ($scope) {
    $scope.name = 'Alrale';
    $scope.date = {
        name : 'Alrale',
        count : 20
    }
    $scope.count = 0;
    //当 model 每次改变时，都会触发第2个函数
    $scope.$watch('name',function (newValue,oldValue) {
        console.log(newValue);
        ++$scope.count;
        if($scope.count > 30){
            $scope.name = '已大于30次';
        }
    })

    $scope.$watch('date',function () {
        // $scope.$watch('date.name',function(){})
    },true)
}