如何使表单条目相互镜像？

Question

您好，我正在为我的 django 应用程序使用 angular2 javascript，我想知道是否有任何方法可以让我的两个表单条目相互镜像？

这是我目前所拥有的：

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