同步两个不同模型的文本框答案

【问题标题】：Sync two textboxes with different models同步两个不同模型的文本框
【发布时间】：2015-02-13 10:25:28
【问题描述】：

我有一个简单的 Angular 应用程序，其中包含两个不同模型的文本框

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

现在，如果在第一封电子邮件中输入了某些内容，我希望将其填充到第二封电子邮件中，但如果手动编辑第二封电子邮件，则此绑定应该停止，即第一封电子邮件中的进一步更改不应影响第二封电子邮件。

我的代码：

<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>

【问题讨论】：

标签： javascript html angularjs angularjs-ng-model

【解决方案1】：

你需要使用 watch 来绑定 firstEmail 中 secondEmail 中的内容。

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

Plunker

【讨论】：

@squiroid 伟人+1..如果是收藏，我们可以在手表中添加 true :)

【解决方案2】：

使用ng-change 指令更新值。

<body ng-app="emailApp">
  <div ng-controller="EmailCtrl">
      First Email: <input ng-model="firstEmail" ng-change="secondEmail=firstEmail"/>
      <br>
      Second Email: <input ng-model="secondEmail"/>
  </div>
</body>

Working Plunkr

这可以帮助你。谢谢。

【讨论】：

谢谢。它也是一个正确的答案。但是 squiroid 的回答正好解决了我的要求，因为我还需要引用 oldvalue
@dusk7 是的。不客气。 ng-change 避免了脏检查。就像 $watch 一样..如果你想要 oldValues 那么你需要像@squiroid 建议的那样去$watch :)