根据其他字段填充一个输入字段

Question

我在项目中使用angular.js 。 在模板中，我有：

 <div class='form-group'>
   <label>Field 1</label>
  <input type='text' ng-model='f1' required class="form-control">
 </div>


 <div class='form-group'>
    <label>Field 2</label>
     <input type='text' ng-model='f1' required class="form-control">
 </div>

我的controller现在仅使用一种模型$scope.f1

我想基于Field 1预填充Field 2 。 但是由于我使用相同的模型，因此如果我在Field 2编写某些内容，则会覆盖Field 1 。

我不要这种行为。 我应该稍后可以编辑Field 2而不会影响Field 1 。

有没有办法实现这种行为？

Answer 1

您可以使用$ watch ，它注册一个当watchExpression更改时要执行的侦听器回调。

$scope.$watch(function () {
    return $scope.f1;
},
function (newValue, oldValue) {
    $scope.f2 = $scope.f1;
}, true);

工作演示