Question

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

a）账单地址：姓名，地址第1行，地址第2行，国家，电话等。

b）送货地址：姓名，地址第1行，地址第2行，国家，电话等。

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

我需要使用Angular JS来做这件事。有人可以告诉我怎么做吗？

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

Answer 1

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

然后您需要处理以下案例

如果选中复选框，则将送货地址复制到帐单邮寄地址对象。
如果选中复选框，则禁止编辑帐单邮寄地址。
如果通过复选框修改了送货地址中的任何字段，请将其复制到帐单邮寄地址对象。

这是一个例子

＆＃13;

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

＆＃13;

以下是Plnkr

Answer 2

你走了。我正在为您提供简化的解决方案。

event.stopPropagation

// Code goes here

var myApp = angular.module('myApp', []);

myApp.controller('FooCtrl', function($scope) {

    $scope.billing = {};
    $scope.shipping = {};

    $scope.copyAddresses = function() {
        if ($scope.copyAddress) {
            $scope.shipping = angular.copy($scope.billing);
        }
    }

    $scope.$watch('billing', function(newValue) {
        if (newValue) {
            $scope.copyAddresses();
        }
    }, true);
});

这会在点击该复选框后将所有帐单邮寄地址复制到送货地址，当您开始输入时，如果选中该复选框，也会更新送货地址。

Answer 3

HTML：

    <div ng-controller="MyCtrl">
    <div>
      Billing address
      Address <input type="text" ng-model="billing.Address" />
    </div>
      <div>
      Shipping address
      Address <input type="text" ng-model="Shipping.Address" />
    </div>
    <div>
      Shipping address is same as billing address
      <input type="checkbox" ng-click="CheckClicked()" ng-model="SameAddress" />
    </div>
    </div>

控制器：

 myApp.controller('MyCtrl', function($scope) {
    $scope.CheckClicked = function(){
    debugger;
      if($scope.SameAddress){
        $scope.Shipping = $scope.billing;
      }
      else{
        $scope.Shipping = angular.copy($scope.Shipping);
      }
    };
    });

Fiddle

Answer 4

这个想法就像您可以为BillingAddress和ShippingAddress使用两个范围变量。

然后你可以使用＆＃39; ng-checked＆＃39;复选框中的属性用于获取已检查的事件，如果与复选框关联的模型为true，则必须将ShippingAddress AddressLine2替换为BillingAddress AddressLine2

Answer 5

试试这个：

<input type="text" ng-model="box1">
 <input type="text" ng-model="box2">
 <input type="checkbox" ng-model="active" ng-change="copyIt(active)">

JS：

function MyCtrl($scope) {
   $scope.box1="";
   $scope.copyIt = function (active) {
     if(active){
        $scope.box2 = $scope.box1;
    }   else {
        $scope.box2="";
       }
  }
}

Fiddle

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

5 个答案: