同步两个具有不同模型的文本框

Question

我有一个简单的 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>

Answer 1

您需要使用watch从firstEmail绑定到secondEmail中的内容。

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

Plunker

Answer 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

这可以帮助你。谢谢

同步两个具有不同模型的文本框

Sync two textboxes with different models

html

javascript

angularjs

angularjs-ng-model