zoukankan      html  css  js  c++  java
  • AngularJS 中ng-model通过$watch动态取值

    这个例子的意思是,当xxxx的长度不超过6时,xxxx和yyyy两个input的model是无关的,但当xxxx超过6,则yyyy会跟随其值而变化。

    另一种做法是在input的ng-model后面添加ng-change关联一个函数,进行动态更新,也可以达到类似的效果。

    这两种做法本质上都没有改变ng-model指向的对象,但是能把另一个model的变化反映到自己身上来。

    <!doctype HTML>
    <html>
    
    <head lang="en">
      <meta charset="utf-8">
    
      <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
      <script type="text/javascript">
        var app = angular.module('app', []);
        app.controller('AppCtrl', function($scope) {
    
          $scope.xxxx = "apple";
          $scope.yyyy = "banana";
    
          $scope.$watch('xxxx', function() {
    
            if ($scope.xxxx.length > 6) {
              $scope.yyyy = "***" + $scope.xxxx + "***";
            } else {}
          });
        });
      </script>
    
    
    </head>
    
    <body ng-app="app" ng-controller="AppCtrl">
    
      <input type="text" ng-model="xxxx">
      <input type="text" ng-model="yyyy">
    
      <br/>
      <p>{{xxxx}}</p>
      <p>{{yyyy}}</p>
    
    </body>
    
    </html>
    

      

  • 相关阅读:
    基于goahead 的固件程序分析
    ELK
    weblogic doc
    shell 查找与替换
    简单的shell命令
    weblogic 安装配置打补丁
    WLST Hangs Up Because of Java VM ClassLoader Deadlock
    WLST
    常用weblogic搜索关键字
    How to Apply Patches to a WLS 8.1 Environment
  • 原文地址:https://www.cnblogs.com/pekkle/p/7061239.html
Copyright © 2011-2022 走看看