同步两个文本框不同型号 [英] Sync two textboxes with different models

查看:176
本文介绍了同步两个文本框不同型号的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有两个文本框机型不同角度简单的应用程序

 第一封邮件:<输入NG模型=firstEmail/>
第二封电子邮件:其中,输入NG模型=secondEmail/>

现在,如果事情是在第一封电子邮件类型的,我希望它得到填充在第二封电子邮件,但如果第二封邮件手动编辑,那么这种结合应该停止即第一封电子邮件进一步的变化should't影响第二封邮件。

我的code:

 < HTML和GT;
< HEAD>
&所述; SCRIPT SRC =htt​​p://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-beta.1/angular.min.js>&下; /脚本>
<脚本>
VAR emailApp = angular.module('emailApp',[]);
emailApp.controller('EmailCtrl',['$范围',函数($范围){}]);
< / SCRIPT>
< /头>
<机身NG-应用=emailApp>
  < D​​IV NG控制器=EmailCtrl>
      第一封电子邮件:其中,输入NG模型=firstEmail/>
      < BR>
      第二封电子邮件:其中,输入NG模型=secondEmail/>
      < /选择>
  < / DIV>
< /身体GT;
< / HTML>


解决方案

您需要使用的手表从firstEmail在secondEmail内容绑定。

  $范围。$腕表('firstEmail',函数(的newval,OLDVAL){
    $ scope.secondEmail =的newval;
    })

Plunker

I have a simple angular app with two textboxes with different models

First Email: <input ng-model="firstEmail"/>
Second Email: <input ng-model="secondEmail"/>

Now, if something is typed in first email, I want it to get populated in second email but if second email is manually edited, then this binding should stop i.e. further changes in first email should't affect second email.

My code:

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-beta.1/angular.min.js"></script>
<script>
var emailApp = angular.module('emailApp', []);
emailApp.controller('EmailCtrl', ['$scope', function ($scope) {

}]);
</script>
</head>
<body ng-app="emailApp">
  <div ng-controller="EmailCtrl">
      First Email: <input ng-model="firstEmail"/>
      <br>
      Second Email: <input ng-model="secondEmail"/>
      </select>
  </div>
</body>
</html>

解决方案

You need to use watch to bind the content in secondEmail from the firstEmail.

  $scope.$watch('firstEmail',function(newVal,oldVal){
    $scope.secondEmail=newVal;
    })

Plunker

这篇关于同步两个文本框不同型号的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆