Estoy trabajando en el carrito de compras donde la persona necesita completar 2 formularios similares en la misma página. El primer formulario es la Dirección de facturación y el segundo formulario es la Dirección de envío. Ambos formularios contienen elementos de entrada similares, por ejemplo:

A) Dirección de facturación: nombre, línea de dirección 1, línea de dirección 2, país, teléfono, etc.

B) Dirección de envío: nombre, línea de dirección 1, línea de dirección 2, país, teléfono, etc.

Hay una casilla de verificación que dice "Verificar si la dirección de facturación y la dirección de envío son las mismas". Entonces, si solo cuando la casilla está marcada necesito copiar los datos de la dirección de facturación a la dirección de envío, incluso si el usuario realiza un cambio en la dirección de facturación, debe copiar automáticamente los cambios a la dirección de envío.

Necesito hacer esto usando Angular JS. ¿Puede algún cuerpo decirme cómo hacer esto?

(Editar: Soy nueva en Angular Js y no sé por dónde empezar)

6
D555 10 dic. 2015 a las 09:23

5 respuestas

La mejor respuesta

Puede definir dos secciones en su formulario. Uno para la dirección de envío y otro para la dirección de facturación. En la dirección de facturación, agregue una casilla de verificación para la misma dirección.

Luego debe manejar los siguientes casos

  • Copie la dirección de envío al objeto de la dirección de facturación si la casilla de verificación está marcada.
  • Desactive la edición de la dirección de facturación si la casilla de verificación está marcada.
  • Si algún campo de la dirección de envío se modifica con la casilla marcada, cópielo en el objeto de la dirección de facturación.

Aquí está el ejemplo.

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

Aquí está la Plnkr

5
Vivek 10 dic. 2015 a las 06:49

La idea es que puede usar dos variables de alcance para su BillingAddress y ShippingAddress.

Luego, puede usar el atributo 'ng-verified' en su casilla de verificación para recuperar el evento marcado, si el modelo asociado con la casilla de verificación es verdadero, debe reemplazar el ShippingAddress AddressLine2 con el BillingAddress AddressLine2

0
LMK 10 dic. 2015 a las 06:41

Prueba esto:

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

Violín

0
Ved 10 dic. 2015 a las 06:56

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>

Controlador:

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

Violín

2
Praveen Prasannan 10 dic. 2015 a las 06:44

Aqui tienes. Te estoy proporcionando una solución simplificada.

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

Esto copiará toda la dirección de facturación a la dirección de envío al hacer clic en esa casilla de verificación y cuando comience a escribir, actualizará la dirección de envío también si la casilla de verificación está marcada.

6
Shashank Agrawal 10 dic. 2015 a las 07:17