Заполните одно поле ввода, основанное на другом

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 2 на основе Field 1. Но так как я использую ту же модель , если я что-то пишу в 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); 

Working Demo