AngularJS：仅在选中复选框的情况下，将一个输入框的值复制到另一个输入框

D555 发表于 Dev

D555

我在购物车上工作，人们需要在同一页面上填写2个类似的表格。第一个表格是帐单地址，第二个表格是收货地址。两种形式都包含相似的输入元素，例如：

a）帐单邮寄地址：姓名，地址行1，地址行2，国家/地区，电话等。

b）收货地址：姓名，地址行1，地址行2，国家/地区，电话等。

有一个复选框，上面写着“检查账单地址和送货地址是否相同”。因此，即使仅选中此复选框，我也需要将数据从帐单地址复制到送货地址，即使用户在帐单地址中进行更改，它也应自动将更改复制到送货地址。

我需要使用Angular JS进行此操作。能不能请我告诉我该怎么做？

（编辑：我是Angular Js的新手，不知道从哪里开始）

维维克

您可以在表单中定义两个部分。一个用于送货地址，另一个用于帐单地址。在帐单地址中，添加相同地址的复选框。

然后，您需要处理以下情况

如果选中此复选框，则将送货地址复制到帐单地址对象。
如果选中了复选框，则禁用帐单地址的编辑。
如果收货地址中的任何字段都被选中并被选中，则将其复制到帐单地址对象。

这是例子

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!doctype html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <title>Example - example-example32-production</title>
      
    </head>
    
    <body ng-app="formExample">
      <div ng-controller="ExampleController">
        <form novalidate class="simple-form">
          <h3>Shipping Address</h3> Name:
          <input type="text" ng-model="sa.name" ng-change="sameAddress && update()" />
          <br /> Street:
          <input type="text" ng-model="sa.street" ng-change="sameAddress && update()" />
          <br /> City:
          <input type="text" ng-model="sa.city" ng-change="sameAddress && update()" />
          <br /> State:
          <input type="text" ng-model="sa.state" ng-change="sameAddress && update()" />
          <br /> Pin:
          <input type="text" ng-model="sa.pin" ng-change="sameAddress && update()" />
          <br /> Mobile:
          <input type="text" ng-model="sa.mobile" ng-change="sameAddress && update()" />
          <br />
          <br />
    
          <h3>Billing Address</h3> Name:
          <input type="text" ng-model="ba.name" ng-disabled="sameAddress" />
          <br /> Street:
          <input type="text" ng-model="ba.street" ng-disabled="sameAddress" />
          <br /> City:
          <input type="text" ng-model="ba.city" ng-disabled="sameAddress" />
          <br /> State:
          <input type="text" ng-model="ba.state" ng-disabled="sameAddress" />
          <br /> Pin:
          <input type="text" ng-model="ba.pin" ng-disabled="sameAddress" />
          <br /> Mobile:
          <input type="text" ng-model="ba.mobile" ng-disabled="sameAddress" />
          <br />
          <input type="checkbox" ng-model="sameAddress" ng-change="sameAddress && update()" />Same as Shipping Address Address
          <br />
    
        </form>
    
      </div>
    
      <script>
        angular.module('formExample', [])
          .controller('ExampleController', ['$scope', function($scope) {
            $scope.sa = {};
            $scope.ba = {};
    
            $scope.update = function(sa) {
              $scope.ba = angular.copy($scope.sa);
            };
    
          }]);
      </script>
    </body>
    
    </html>