AngularJS：一个输入框的值复制到只有复选框被选中的另一个输入框 [英] AngularJS: Copy the value of one input box to another input box only if checkbox is checked
问题描述
我工作的购物车在那里的人需要填写在同一页上2类似的形式。第一种形式是帐单地址和第二种形式是送货地址。这两种形式中包含类似的输入元素，例如：
一）计费地址：姓名，地址行1，地址行2，国家，电话等
二）送货地址：名称，地址行1，地址行2，国家，电话等
有是说检查账单地址和送货地址相同复选框。因此，如果被选中的复选框，只有当我需要从帐单地址中的数据复制到送货地址，即使用户在账单地址就应该自动复制修改送货地址的变化。
我需要这样做采用了棱角分明的JS。一些机构可以请告诉我如何做到这一点？
（编辑：我是新来的角的js，不知道从哪里开始）
您可以定义在形成两个部分。一个用于送货地址和其他的帐单地址。在帐单地址添加一个复选框相同的地址。
您则需要处理下列情况下
- 复制送货地址，账单地址对象，如果复选框被选中。
- 帐单地址的禁止编辑，如果复选框被选中。
- 如果从收货地址的任何字段与选中复选框修改它复制到帐单地址对象。
下面是该例子
＆LT;脚本SRC =https://ajax.googleapis.com/ajax /libs/angularjs/1.2.23/angular.min.js\"></script>\r
＆LT;！DOCTYPE HTML＆GT;\r
＆LT; HTML LANG =ENGT＆;\r
\r
＆LT; HEAD＆GT;\r
＆LT;间的charset =UTF-8＆GT;\r
＆LT;标题物实施例 - 例如，example32生产＆LT; /标题＆GT;\r
\r
＆LT; /头＆GT;\r
\r
＆LT;机身NG-应用=formExample＆GT;\r
＆LT; DIV NG控制器=ExampleController＆GT;\r
＆LT;形式的novalidate类=简单形式＆GT;\r
＆LT; H3＆GT;送货地址＆LT; / H3 GT＆;名称：\r
＆LT;输入类型=文本NG模型=sa.nameNG变化=sameAddress＆放大器;＆放大器;更新（）/＆GT;\r
＆LT; BR /＆GT;街：\r
＆LT;输入类型=文本NG模型=sa.streetNG变化=sameAddress＆放大器;＆放大器;更新（）/＆GT;\r
＆LT; BR /＆GT;市：\r
＆LT;输入类型=文本NG模型=sa.cityNG变化=sameAddress＆放大器;＆放大器;更新（）/＆GT;\r
＆LT; BR /＆GT;州：\r
＆LT;输入类型=文本NG模型=sa.stateNG变化=sameAddress＆放大器;＆放大器;更新（）/＆GT;\r
＆LT; BR /＆GT;销：\r
＆LT;输入类型=文本NG模型=sa.pinNG变化=sameAddress＆放大器;＆放大器;更新（）/＆GT;\r
＆LT; BR /＆GT;移动：\r
＆LT;输入类型=文本NG模型=sa.mobileNG变化=sameAddress＆放大器;＆放大器;更新（）/＆GT;\r
＆LT; BR /＆GT;\r
＆LT; BR /＆GT;\r
\r
＆LT; H3＆GT;账单地址＆LT; / H3 GT＆;名称：\r
＆LT;输入类型=文本NG模型=ba.nameNG残疾=sameAddress/＆GT;\r
＆LT; BR /＆GT;街：\r
＆LT;输入类型=文本NG模型=ba.streetNG残疾=sameAddress/＆GT;\r
＆LT; BR /＆GT;市：\r
＆LT;输入类型=文本NG模型=ba.cityNG残疾=sameAddress/＆GT;\r
＆LT; BR /＆GT;州：\r
＆LT;输入类型=文本NG模型=ba.stateNG残疾=sameAddress/＆GT;\r
＆LT; BR /＆GT;销：\r
＆LT;输入类型=文本NG模型=ba.pinNG残疾=sameAddress/＆GT;\r
＆LT; BR /＆GT;移动：\r
＆LT;输入类型=文本NG模型=ba.mobileNG残疾=sameAddress/＆GT;\r
＆LT; BR /＆GT;\r
＆LT;输入类型=复选框NG模型=sameAddressNG变化=sameAddress＆放大器;＆放大器;更新（）/＆GT;同送货地址地址\r
＆LT; BR /＆GT;\r
\r
＆LT; /表及GT;\r
\r
＆LT; / DIV＆GT;\r
\r
＆LT;脚本＆GT;\r
angular.module（'formExample'，[]）\r
.controller（'ExampleController'，['$范围'，函数（$范围）{\r
$ scope.sa = {};\r
$ scope.ba = {};\r
\r
$ scope.update =功能（SA）{\r
$ scope.ba = angular.copy（$ scope.sa）;\r
};\r
\r
}]）;\r
＆LT; / SCRIPT＆GT;\r
＆LT; /身体GT;\r
\r
＆LT; / HTML＆GT; \r
下面是 Plnkr
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)
You can define two section in your form. One for shipping address and other for billing address. In the billing address add a checkbox for same address.
You then need to handle following cases
- Copy shipping address to billing address object if checkbox is checked.
- Disable editing of billing address if checkbox is checked.
- If any field from shipping address is modified with checkbox checked copy it to billing address object.
Here is the example
<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>
Here is the Plnkr
这篇关于AngularJS：一个输入框的值复制到只有复选框被选中的另一个输入框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
