angular js 入门2 $watch 监听事件

最新推荐文章于 2020-12-28 19:58:37 发布

Rainbow_Xjj

最新推荐文章于 2020-12-28 19:58:37 发布

阅读量840

点赞数

本文链接：https://blog.csdn.net/sky_sunshine_x/article/details/70833146

版权

$watch监听事件

$watch是一个scope函数，用于监听模型变化，当你的模型部分发生变化时它会通知你。

<html ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="AngularJS/angular.min.js"></script>//引入angular库
</head>
<body>
<div ng-controller="myCtrl">
    <input type="text" ng-model="username">
    用户输入：{{username}}
</div>
<script>
    var app = angular.module("myApp", []);
    app.controller("myCtrl", function($scope) {
        $scope.username = "administrator";
        $scope.name = "tom";
        $scope.age = 48;
        $scope.users = {
            username:"admin",
            password:"123"
        }
        $scope.goodses = [
            {goodsID:1, goodsName:"商品A"},
            {goodsID:2, goodsName:"商品B"},
            {goodsID:3, goodsName:"商品C"}
        ]
        // 1. 监听单个普通变量
        $scope.$watch("name", function() {
            // TODO name属性发生变化执行的函数代码
        })
        // 2. 监听多个变量
        $scope.$watch("name + age", function() {
            // TODO name或者age变量的数据发生变化执行的函数代码
        })
        // 3. 监听对象的数据
        $scope.$watch("users.username", function() {
            // TODO usres对象中的username属性一旦发生变化执行的函数代码
        })
        // 4. 监听对象的所有属性
        $scope.$watch("users", function() {
            // TODO 监听users对象的所有属性，任一属性值发生变化执行函数代码
        },true)
        // 5. 监听数组数据~而不监听数组中的对象数据
        $scope.$watchCollection("goodses", function() {
            // TODO 一旦goodses数组中的元素，被删除、添加时执行函数的代码
        })
        // 6. 监听数据发生变化的细节：修改前 VS 修改后
        $scope.$watch("username", function(newValue, oldValue) {
            console.log("数据被修改了", newValue, oldValue);
        })
        // 7. $watch可以重复，不会被覆盖，都会执行！
        $scope.$watch("username", function(newValue, oldValue) {
            console.log("data changed:", newValue, oldValue);
        })
    });
    /*
    $scope对象上，有一个$watch()函数，用于监听模型数据的变化
     */
</script>
</body>
</html>

Rainbow_Xjj

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
angular js 入门2 $watch 监听事件

Title 用户输入：{{username}} var app = angular.module("myApp", []); app.controller("myCtrl", function($scope) { $scope.username = "administrator";
复制链接

扫一扫