zoukankan      html  css  js  c++  java
  • ng 监听数据的变化

    $scope.$watch('监听的变量的名称',
    func)

    在angularJs之所以能够实现绑定,是因为angularJS框架在背后为每一个模型数据添加了一个监听,与$watch其实是一个道理。

    结果:

    代码:

    <html ng-app="myModule">
    <head lang="en">
        <meta charset="UTF-8">
        <script src="js/angular.js"></script>
        <title></title>
    </head>
    <body>
        <div ng-controller="myCtrl">
            <input type="text" ng-model="kw"/>
        </div>
    <script>
        var app=angular.module('myModule',['ng']);
        app.controller('myCtrl',function($scope){
    
            $scope.kw = '';
            //监听模型数据的变化
            $scope.$watch('kw',
                function (newVal,oldVal) {
                    console.log("newVal is "+newVal+
                " oldval is "+oldVal);
            })
        })
    </script>
    
    </body>
    </html>

    例子:通过MVC实现一个SPA,在view有一个textarea(留言本),有一个select(选择颜色rgb),有一个checkbox(是否同意),通过$watch监听每一个输入组件的选择结果并通过控制台输出日志信息。

    效果:

    代码:

    <!DOCTYPE html>
    <html ng-app="myApp">
    <head lang="en">
      <meta charset="UTF-8">
      <script src="js/angular.js"></script>
      <title></title>
    </head>
    <body>
    <div ng-controller="myCtrl">
      请输入留言内容:
      <textarea ng-model="user_msg"></textarea>
      <br/>
      选择喜欢的颜色:
      <select ng-model="user_color">
        <option value="r">红色</option>
        <option value="g">绿色</option>
        <option value="b">蓝色</option>
      </select>
      <br/>
      是否同意
      <input type="checkbox"
             ng-model="user_agree"/>
    </div>
    <script>
      var app = angular.module('myApp', ['ng']);
      app.controller('myCtrl', function ($scope) {
        console.log('myCtrl  func is called');
        $scope.user_msg = "";
        $scope.user_color='r';
        $scope.user_agree = true;
    
        $scope.$watch('user_msg', function (newVal,oldVal) {
          console.log(newVal);
          console.log($scope.user_msg);
        })
    
        $scope.$watch('user_color', function () {
          console.log($scope.user_color);
        })
    
        $scope.$watch('user_agree', function () {
          console.log($scope.user_agree);
        })
    
        console.log($scope);
    
      })
    </script>
    </body>
    </html>
  • 相关阅读:
    安装最新版Mysql(APT方式安装)
    Tengine环境安装
    Docker 教程
    Docker Redis
    Ubuntu
    spring boot actuator 如何显示详细信息
    spring boot 加载日志框架后经常出现 LOG_PATH_IS_UNDEFINED 目录怎么办?【未解决】
    Tomcat 目录结构以及基本配置
    Java Hash集合的equals()与hashCode() 方法
    Java Map 集合实现类
  • 原文地址:https://www.cnblogs.com/web-fusheng/p/6953618.html
Copyright © 2011-2022 走看看