Menu
I am working on the shopping cart where person needs to fill 2 similar form on the same page. First form is Billing Address and Second form is Shipping Address. Both the forms contains similar input elements for example:
a) Billing Address: Name, Address Line 1, Address Line 2, Country, Phone etc.
b) Shipping Address: Name, Address Line 1, Address Line 2, Country, Phone etc.
There is a checkbox which says "Check if billing address and shipping address is same". So, if only when checkbox is checked I need to copy the data from billing address to shipping address, even if user makes change in the billing address it should automatically copy the changes to shipping address.
I need to do this using Angular JS. Can some body please tell me how to do this?
(Edit: I am new to Angular Js and don't know where to start)
985
Here you go. I'm providing you a simplified solution.
// 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>This will copy all the billing address to shipping address on the click of that checkbox and as you start typing, that will update the shipping address also if the checkbox is checked.
131
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
