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)
5 respuestas
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
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
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="";
}
}
}
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);
}
};
});
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.
Preguntas relacionadas
Preguntas vinculadas
Nuevas preguntas
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.