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)

javascript jquery angularjs
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
34195086

Preguntas relacionadas

21 ¿Cómo verifico si una matriz incluye un valor en JavaScript?
25 Configuración de "marcada" para una casilla de verificación con jQuery
17 ¿Cómo verificar si una cadena "comienza con" otra cadena?
23 Compruebe si la casilla de verificación está marcada con jQuery
29 Copiar matriz por valor
27 Compruebe si un valor es un objeto en JavaScript
28 ¿Cómo me uno a la lista de valores de casillas de verificación con AngularJS?

Preguntas vinculadas

2 Vincular un valor de entrada a otra entrada

Nuevas preguntas

3 ¿Cómo llamar a la función async en useEffect después de enviar en react native?
3 mangosta .save () no es una función
3 Filtrar una matriz de objetos según varios términos de búsqueda
3 Atravesar un árbol (recursivo) que contiene propiedades en forma de valores ordinarios y objetos y matrices
4 Cómo escribir dinámicamente en Javascript (proyecto react)
4 ¿Cómo agregar comas a una cadena entre caracteres que no son iguales?
3 Los componentes secundarios de React no se vuelven a renderizar cuando se asignan desde una matriz
3 Cómo retrasar la ejecución de la función JS hasta 5 segundos después de que se cargue la página
3 ¿Cómo filtrar valores indefinidos de Array JavaScript?
3 Convertir JavaScript Array [a, b, c, d, e] en [a + b, b + c, c + d, d + e] de forma dinámica
Nuevas preguntas con la etiqueta javascript >

javascript

Para preguntas sobre la programación en ECMAScript (JavaScript / JS) y sus diversos dialectos / implementaciones (excepto ActionScript). Incluya todas las etiquetas relevantes en su pregunta; por ejemplo, [node.js], [jquery], [json], etc.

Más sobre javascript...