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

【问题标题】：AngularJS: Copy the value of one input box to another input box only if checkbox is checkedAngularJS：仅在选中复选框时才将一个输入框的值复制到另一个输入框
【发布时间】：2015-12-10 06:23:42
【问题描述】：

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

a) 帐单地址：姓名、地址行 1、地址行 2、国家/地区、电话等。

b) 送货地址：姓名、地址行 1、地址行 2、国家/地区、电话等。

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

我需要使用 Angular JS 来做到这一点。有人能告诉我怎么做吗？

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

【问题讨论】：

到目前为止你做了什么？想在这里聘请开发人员？
@PraveenPrasannan 哈哈哈，其实我是 Angular Js 的新手，不知道从哪里开始..
那你已经有一些代码了吗？
@JiaJian all php, html code is ready but not angular js code as I don't know how to start

标签： javascript jquery angularjs

【解决方案1】：

给你。我正在为您提供一个简化的解决方案。

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

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body class="container" ng-controller="FooCtrl">
<h1>Hello Plunker!</h1>

<div class="well well-sm">
    <form class="form-horizontal">
        <div class="form-group">
            <label class="control-label col-xs-3">Address 1</label>
            <div class="col-xs-6">
                <input type="text" ng-model="billing.address1" class="form-control input-sm"/>
            </div>
        </div>

        <div class="form-group">
            <label class="control-label col-xs-3">Address 2</label>
            <div class="col-xs-6">
                <input type="text" ng-model="billing.address2" class="form-control input-sm"/>
            </div>
        </div>

        <div class="form-group">
            <label class="control-label col-xs-3">City</label>
            <div class="col-xs-6">
                <input type="text" ng-model="billing.city" class="form-control input-sm"/>
            </div>
        </div>
    </form>
</div>

<div class="checkbox">
    <label>
        <input type="checkbox" ng-model="copyAddress" ng-change="copyAddresses()"/>
        Check if billing address and shipping address is same
    </label>
</div>

<div class="well well-sm">
    <form class="form-horizontal">
        <fieldset ng-disabled="copyAddress">
            <div class="form-group">
                <label class="control-label col-xs-3">Address 1</label>
                <div class="col-xs-6">
                    <input type="text" ng-model="shipping.address1" class="form-control input-sm"/>
                </div>
            </div>

            <div class="form-group">
                <label class="control-label col-xs-3">Address 2</label>
                <div class="col-xs-6">
                    <input type="text" ng-model="shipping.address2" class="form-control input-sm"/>
                </div>
            </div>

            <div class="form-group">
                <label class="control-label col-xs-3">City</label>
                <div class="col-xs-6">
                    <input type="text" ng-model="shipping.city" class="form-control input-sm"/>
                </div>
            </div>
        </fieldset>
    </form>
</div>
</body>
</html>

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

【讨论】：

什么不起作用？你是如何运行它的？我的意思是，您是否将其粘贴在一个简单的 HTML 页面中并在没有任何浏览器的情况下在浏览器中打开该页面？如果你点击上面的Run code snippet，你可以在那里自己测试。
我使用了类似的东西，因为我更喜欢在控制器中使用 $watch 表达式

【解决方案2】：

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

接下来您需要处理以下情况

如果选中复选框，则将送货地址复制到帐单地址对象。
如果选中复选框，则禁用帐单地址编辑。
如果在选中复选框的情况下修改了送货地址中的任何字段，请将其复制到帐单地址对象。

这是一个例子

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

这里是Plnkr

【讨论】：

我实现了它并且它工作正常，但是在页面加载时它会从输入元素中删除我的默认值
您的默认值在哪里，在 HTML 中还是在控制器内部？理想情况下，在控制器内部，您应该使用默认值初始化您的 ng-model。例如 $scope.sa = {name:'Johnny'}; 等

【解决方案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

【讨论】：

这里最好在 ng-change 上调用方法而不是 ng-click。

【解决方案4】：

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

然后您可以在您的复选框中使用'ng-checked'属性来获取选中的事件，如果与复选框关联的模型为真，您必须将 ShippingAddress AddressLine2 替换为 BillingAddress AddressLine2

【讨论】：

【解决方案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

【讨论】：