AngularJS: copie el valor de un cuadro de entrada a otro cuadro de entrada solo si la casilla está marcada

Question

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

Answer 1

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

Answer 2

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

Answer 3

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

Answer 4

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

Answer 5

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

AngularJS: copie el valor de un cuadro de entrada a otro cuadro de entrada solo si la casilla está marcada

5 respuestas

Preguntas relacionadas

Preguntas vinculadas

Nuevas preguntas

javascript