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

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

1 个答案: