Как сделать записи формы зеркальными?

Question

Привет, так что я работаю с angular2 javascript для моего приложения django, и мне было интересно, можно ли каким-либо образом сделать мои две записи формы зеркально похожими друг на друга?

Это то, что у меня так далеко:

<input class="form-control" ng-model="price_level.price_point[1].edit_price_per_case" name="price_per_case1" type="text" min="0" ng-pattern="/^[0-9]*(\.[0-9]{1,2})?$/" required style="width: 65px;">


<span ng-show="price_level.edit">
        <input class="form-control" type="text" min="0" ng-pattern="/^[0-9]*(\.[0-9]{1,2})?$/" 
        name="price_per_case0" ng-model="price_level.price_point[0].edit_price_per_case"
        ng-required='price_level.edit' style="width: 65px;">
  </span>

Мне бы хотелось, чтобы при вводе верхнего входа он автоматически заполнял нижний или даже наоборот.

Answer 1

Вы можете использовать одну и ту же модель для каждого из них, например, price_level.price_point[1].edit_price_per_case для каждого элемента.

Альтернативой является использование ng-change значений событий и зеркал при изменении:

<input class="form-control" ng-model="price_level.price_point[1].edit_price_per_case" ng-change="mirror(price_level.price_point[1].edit_price_per_case)" name="price_per_case1" type="text" min="0" ng-pattern="/^[0-9]*(\.[0-9]{1,2})?$/" required style="width: 65px;">

<span ng-show="price_level.edit">
     <input class="form-control" type="text" min="0" ng-pattern="/^[0-9]*(\.[0-9]{1,2})?$/" name="price_per_case0" ng-model="price_level.price_point[0].edit_price_per_case" ng-change="mirror(price_level.price_point[0].edit_price_per_case)" ng-required='price_level.edit' style="width: 65px;">
</span>

И в вашем контроллере:

$scope.mirror = function(source) {
    $scope.price_level.price_point[0].edit_price_per_case = source;
    $scope.price_level.price_point[1].edit_price_per_case = source;
};