我正在使用angularJS。
我有两部分。
每个部分的文本框都是相同的字段。
我也有复选框。选中复选框后，表示通讯地址已分配给永久地址。
我在这里附上我的代码。我试过它不工作。任何人都可以建议如何实现这个？
angular.module('ExampleApp', [])
.controller('firstCtrl', function($scope, $filter) {
$scope.localAddress = {};
$scope.permanentAddress = {};
$scope.address = {
value : false
};
});<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<h2 style="font-size: 18px;font-weight: bold;" > Communication Address
<div class="clearfix"></div>
<div ng-app="ExampleApp">
<div ng-controller="firstCtrl">
<form class="tab-pane address" id="address" name="addressForm" rc-submit="addressState()" rc-step novalidate>
<div class="x_content col-md-offset-1 col-sm-offset-1">
<div class="row ">
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="form-group col-md-8 col-sm-8 col-xs-12">
<label for="door_no">Door No</label>
<input type="text" name="door_no" ng-model="localAddress.door_no" id="door_no" class="form-control parsley-success" data-parsley-id="0951">
<ul class="parsley-errors-list" id="parsley-id-0951"></ul>
</div>
</div>
</div>
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="form-group col-md-8 col-sm-8 col-xs-12">
<label for="street">Street</label>
<input type="text" name="street" ng-model="localAddress.street" id="street" class="form-control parsley-success" data-parsley-id="0951">
<ul class="parsley-errors-list" id="parsley-id-0951"></ul>
</div>
</div>
</div>
</div>
<div class="row ">
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="form-group col-md-8 col-sm-8 col-xs-12">
<label for="location">Location</label>
<input type="text" name="location" ng-model="localAddress.location" id="location" class="form-control parsley-success" data-parsley-id="0951">
<ul class="parsley-errors-list" id="parsley-id-0951"></ul>
</div>
</div>
</div>
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="form-group col-md-8 col-sm-8 col-xs-12">
<label for="city">City</label>
<input type="text" name="city" ng-model="localAddress.city" id="city" class="form-control parsley-success" data-parsley-id="0951">
<ul class="parsley-errors-list" id="parsley-id-0951"></ul>
</div>
</div>
</div>
</div>
<div class="row ">
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="form-group col-md-8 col-sm-8 col-xs-12">
<label for="district">District</label>
<input type="text" name="district" ng-model="localAddress.district" id="district" class="form-control parsley-success" data-parsley-id="0951">
<ul class="parsley-errors-list" id="parsley-id-0951"></ul>
</div>
</div>
</div>
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="form-group col-md-8 col-sm-8 col-xs-12">
<label for="state">State</label>
<input type="text" name="state" ng-model="localAddress.state" id="state" class="form-control parsley-success" data-parsley-id="0951">
<ul class="parsley-errors-list" id="parsley-id-0951"></ul>
</div>
</div>
</div>
</div>
<div class="row ">
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="form-group col-md-8 col-sm-8 col-xs-12">
<label for="country">Country</label>
<input type="text" name="country" ng-model="localAddress.country" id="country" class="form-control parsley-success" data-parsley-id="0951">
<ul class="parsley-errors-list" id="parsley-id-0951"></ul>
</div>
</div>
</div>
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="form-group col-md-8 col-sm-8 col-xs-12">
<label for="pin_code">Pin Code</label>
<input type="text" name="pin_code" allow-pattern="[\d]" ng-model="localAddress.pin_code" id="pin_code" class="form-control parsley-success" data-parsley-id="0951">
<ul class="parsley-errors-list" id="parsley-id-0951"></ul>
</div>
</div>
</div>
</div>
<div class="row ">
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="form-group col-md-8 col-sm-8 col-xs-12">
<label for="contact_no">Contact No</label>
<input type="text" minlength="10" maxlength="10" name="contact_no" allow-pattern="[\d]" ng-model="localAddress.contact_no" id="contact_no" class="form-control parsley-success" data-parsley-id="0951">
<input type="hidden" ng-model="localAddress.is_permanent_address_flag" ng-show="(localAddress.is_permanent_address_flag=false) ||1==1" class="form-control parsley-success">
<ul class="parsley-errors-list" id="parsley-id-0951"></ul>
</div>
</div>
</div>
</div>
</div>
<div class="x_title">
<h2 style="font-size: 18px;font-weight: bold;" > Permanent Address
<input type="checkbox" ng-model="address.value">{{address.value}}
<span style="color:#73879C; font-size:15px">(Same as communication address )</span></h2>
<div class="clearfix"></div>
</div>
<div class="x_content col-md-offset-1 col-sm-offset-1">
<div class="row ">
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="form-group col-md-8 col-sm-8 col-xs-12">
<label for="door_no">Door No</label>
<input type="text" name="door_no" ng-model="permanentAddress.door_no" id="door_no" class="form-control parsley-success" data-parsley-id="0951">
<ul class="parsley-errors-list" id="parsley-id-0951"></ul>
</div>
</div>
</div>
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="form-group col-md-8 col-sm-8 col-xs-12">
<label for="street">Street</label>
<input type="text" name="street" ng-model="permanentAddress.street" id="street" class="form-control parsley-success" data-parsley-id="0951">
<ul class="parsley-errors-list" id="parsley-id-0951"></ul>
</div>
</div>
</div>
</div>
<div class="row ">
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="form-group col-md-8 col-sm-8 col-xs-12">
<label for="location">Location</label>
<input type="text" name="location" ng-model="permanentAddress.location" id="location" class="form-control parsley-success" data-parsley-id="0951">
<ul class="parsley-errors-list" id="parsley-id-0951"></ul>
</div>
</div>
</div>
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="form-group col-md-8 col-sm-8 col-xs-12">
<label for="city">City</label>
<input type="text" name="city" ng-model="permanentAddress.city" id="city" class="form-control parsley-success" data-parsley-id="0951">
<ul class="parsley-errors-list" id="parsley-id-0951"></ul>
</div>
</div>
</div>
</div>
<div class="row ">
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="form-group col-md-8 col-sm-8 col-xs-12">
<label for="district">District</label>
<input type="text" name="district" ng-model="permanentAddress.district" id="district" class="form-control parsley-success" data-parsley-id="0951">
<ul class="parsley-errors-list" id="parsley-id-0951"></ul>
</div>
</div>
</div>
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="form-group col-md-8 col-sm-8 col-xs-12">
<label for="state">State</label>
<input type="text" name="state" ng-model="permanentAddress.state" id="state" class="form-control parsley-success" data-parsley-id="0951">
<ul class="parsley-errors-list" id="parsley-id-0951"></ul>
</div>
</div>
</div>
</div>
<div class="row ">
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="form-group col-md-8 col-sm-8 col-xs-12">
<label for="country">Country</label>
<input type="text" name="country" ng-model="permanentAddress.country" id="country" class="form-control parsley-success" data-parsley-id="0951">
<ul class="parsley-errors-list" id="parsley-id-0951"></ul>
</div>
</div>
</div>
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="form-group col-md-8 col-sm-8 col-xs-12">
<label for="pin_code">Pin Code</label>
<input type="text" name="pin_code" allow-pattern="[\d]" ng-model="permanentAddress.pin_code" id="pin_code" class="form-control parsley-success" data-parsley-id="0951">
<input type="hidden" ng-model="permanentAddress.is_permanent_address_flag" ng-show="(permanentAddress.is_permanent_address_flag=true) ||1==1" class="form-control parsley-success">
<ul class="parsley-errors-list" id="parsley-id-0951"></ul>
</div>
</div>
</div>
</div>
<div class="row ">
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="form-group col-md-8 col-sm-8 col-xs-12">
<label for="contact_no">Contact No</label>
<input type="text" minlength="10" maxlength="10" name="contact_no" allow-pattern="[\d]" ng-model="permanentAddress.contact_no" id="contact_no" class="form-control parsley-success" data-parsley-id="0951">
<ul class="parsley-errors-list" id="parsley-id-0951"></ul>
</div>
</div>
</div>
</div>
</div>
<!-- Address_Details -->
</form>
</div>
</div>
答案 0 :(得分：0)
执行此更改
var open_editor_in_tab = function() {
utils.open_tab(url);
};
if (!(chrome.browserAction.onClicked.hasListener(open_editor_in_tab))) {
chrome.browserAction.onClicked.addListener(open_editor_in_tab);
}
控制器中的JS：
<input type="checkbox" ng-model="address.value" ng-change="copyCommToPerm()">
答案 1 :(得分：0)
我更新了您的代码，请检查它。它可以根据您的要求正常工作。
angular.module('ExampleApp', [])
.controller('firstCtrl', function($scope, $filter) {
$scope.localAddress = {};
$scope.permanentAddress = {};
$scope.address = {
value : false
};
$scope.IsAddressClone=function()
{
if ($scope.address.value) {
$scope.permanentAddress = Object.assign({}, $scope.localAddress);
}
else
{
$scope.permanentAddress={};
}
}
});<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<h2 style="font-size: 18px;font-weight: bold;" > Communication Address
<div class="clearfix"></div>
<div ng-app="ExampleApp">
<div ng-controller="firstCtrl">
<form class="tab-pane address" id="address" name="addressForm" rc-submit="addressState()" rc-step novalidate>
<div class="x_content col-md-offset-1 col-sm-offset-1">
<div class="row ">
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="form-group col-md-8 col-sm-8 col-xs-12">
<label for="door_no">Door No</label>
<input type="text" name="door_no" ng-model="localAddress.door_no" id="door_no" class="form-control parsley-success" data-parsley-id="0951">
<ul class="parsley-errors-list" id="parsley-id-0951"></ul>
</div>
</div>
</div>
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="form-group col-md-8 col-sm-8 col-xs-12">
<label for="street">Street</label>
<input type="text" name="street" ng-model="localAddress.street" id="street" class="form-control parsley-success" data-parsley-id="0951">
<ul class="parsley-errors-list" id="parsley-id-0951"></ul>
</div>
</div>
</div>
</div>
<div class="row ">
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="form-group col-md-8 col-sm-8 col-xs-12">
<label for="location">Location</label>
<input type="text" name="location" ng-model="localAddress.location" id="location" class="form-control parsley-success" data-parsley-id="0951">
<ul class="parsley-errors-list" id="parsley-id-0951"></ul>
</div>
</div>
</div>
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="form-group col-md-8 col-sm-8 col-xs-12">
<label for="city">City</label>
<input type="text" name="city" ng-model="localAddress.city" id="city" class="form-control parsley-success" data-parsley-id="0951">
<ul class="parsley-errors-list" id="parsley-id-0951"></ul>
</div>
</div>
</div>
</div>
<div class="row ">
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="form-group col-md-8 col-sm-8 col-xs-12">
<label for="district">District</label>
<input type="text" name="district" ng-model="localAddress.district" id="district" class="form-control parsley-success" data-parsley-id="0951">
<ul class="parsley-errors-list" id="parsley-id-0951"></ul>
</div>
</div>
</div>
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="form-group col-md-8 col-sm-8 col-xs-12">
<label for="state">State</label>
<input type="text" name="state" ng-model="localAddress.state" id="state" class="form-control parsley-success" data-parsley-id="0951">
<ul class="parsley-errors-list" id="parsley-id-0951"></ul>
</div>
</div>
</div>
</div>
<div class="row ">
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="form-group col-md-8 col-sm-8 col-xs-12">
<label for="country">Country</label>
<input type="text" name="country" ng-model="localAddress.country" id="country" class="form-control parsley-success" data-parsley-id="0951">
<ul class="parsley-errors-list" id="parsley-id-0951"></ul>
</div>
</div>
</div>
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="form-group col-md-8 col-sm-8 col-xs-12">
<label for="pin_code">Pin Code</label>
<input type="text" name="pin_code" allow-pattern="[\d]" ng-model="localAddress.pin_code" id="pin_code" class="form-control parsley-success" data-parsley-id="0951">
<ul class="parsley-errors-list" id="parsley-id-0951"></ul>
</div>
</div>
</div>
</div>
<div class="row ">
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="form-group col-md-8 col-sm-8 col-xs-12">
<label for="contact_no">Contact No</label>
<input type="text" minlength="10" maxlength="10" name="contact_no" allow-pattern="[\d]" ng-model="localAddress.contact_no" id="contact_no" class="form-control parsley-success" data-parsley-id="0951">
<input type="hidden" ng-model="localAddress.is_permanent_address_flag" ng-show="(localAddress.is_permanent_address_flag=false) ||1==1" class="form-control parsley-success">
<ul class="parsley-errors-list" id="parsley-id-0951"></ul>
</div>
</div>
</div>
</div>
</div>
<div class="x_title">
<h2 style="font-size: 18px;font-weight: bold;" > Permanent Address
<input type="checkbox" ng-model="address.value" ng-change="IsAddressClone()">{{address.value}}
<span style="color:#73879C; font-size:15px">(Same as communication address )</span></h2>
<div class="clearfix"></div>
</div>
<div class="x_content col-md-offset-1 col-sm-offset-1">
<div class="row ">
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="form-group col-md-8 col-sm-8 col-xs-12">
<label for="door_no">Door No</label>
<input type="text" name="door_no" ng-model="permanentAddress.door_no" id="door_no" class="form-control parsley-success" data-parsley-id="0951">
<ul class="parsley-errors-list" id="parsley-id-0951"></ul>
</div>
</div>
</div>
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="form-group col-md-8 col-sm-8 col-xs-12">
<label for="street">Street</label>
<input type="text" name="street" ng-model="permanentAddress.street" id="street" class="form-control parsley-success" data-parsley-id="0951">
<ul class="parsley-errors-list" id="parsley-id-0951"></ul>
</div>
</div>
</div>
</div>
<div class="row ">
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="form-group col-md-8 col-sm-8 col-xs-12">
<label for="location">Location</label>
<input type="text" name="location" ng-model="permanentAddress.location" id="location" class="form-control parsley-success" data-parsley-id="0951">
<ul class="parsley-errors-list" id="parsley-id-0951"></ul>
</div>
</div>
</div>
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="form-group col-md-8 col-sm-8 col-xs-12">
<label for="city">City</label>
<input type="text" name="city" ng-model="permanentAddress.city" id="city" class="form-control parsley-success" data-parsley-id="0951">
<ul class="parsley-errors-list" id="parsley-id-0951"></ul>
</div>
</div>
</div>
</div>
<div class="row ">
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="form-group col-md-8 col-sm-8 col-xs-12">
<label for="district">District</label>
<input type="text" name="district" ng-model="permanentAddress.district" id="district" class="form-control parsley-success" data-parsley-id="0951">
<ul class="parsley-errors-list" id="parsley-id-0951"></ul>
</div>
</div>
</div>
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="form-group col-md-8 col-sm-8 col-xs-12">
<label for="state">State</label>
<input type="text" name="state" ng-model="permanentAddress.state" id="state" class="form-control parsley-success" data-parsley-id="0951">
<ul class="parsley-errors-list" id="parsley-id-0951"></ul>
</div>
</div>
</div>
</div>
<div class="row ">
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="form-group col-md-8 col-sm-8 col-xs-12">
<label for="country">Country</label>
<input type="text" name="country" ng-model="permanentAddress.country" id="country" class="form-control parsley-success" data-parsley-id="0951">
<ul class="parsley-errors-list" id="parsley-id-0951"></ul>
</div>
</div>
</div>
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="form-group col-md-8 col-sm-8 col-xs-12">
<label for="pin_code">Pin Code</label>
<input type="text" name="pin_code" allow-pattern="[\d]" ng-model="permanentAddress.pin_code" id="pin_code" class="form-control parsley-success" data-parsley-id="0951">
<input type="hidden" ng-model="permanentAddress.is_permanent_address_flag" ng-show="(permanentAddress.is_permanent_address_flag=true) ||1==1" class="form-control parsley-success">
<ul class="parsley-errors-list" id="parsley-id-0951"></ul>
</div>
</div>
</div>
</div>
<div class="row ">
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="form-group col-md-8 col-sm-8 col-xs-12">
<label for="contact_no">Contact No</label>
<input type="text" minlength="10" maxlength="10" name="contact_no" allow-pattern="[\d]" ng-model="permanentAddress.contact_no" id="contact_no" class="form-control parsley-success" data-parsley-id="0951">
<ul class="parsley-errors-list" id="parsley-id-0951"></ul>
</div>
</div>
</div>
</div>
</div>
<!-- Address_Details -->
</form>
</div>
</div>
答案 2 :(得分：0)
您可以执行以下更改：
<input type="checkbox" ng-model="address.value" ng-change="address.value ? setSame():setDiff()">
控制器中的JS：
$scope.setSame = function(){
//fired when checkbox is checked
$scope.permanentAddress = angular.copy($scope.localAddress);
}
$scope.setDiff = function(){
//fired when checkbox is unchecked, reset the permanent address
$scope.permanentAddress = {};
}
答案 3 :(得分：0)
您的观点存在许多问题：
minlenght="10"
ng-minlenght="10"，也应更改为maxlength。
AFAIK的allow-pattern="[\d]"是this closed issue
以下是可能适合您的ngPattern链接。
我查找对第一个表单所做的更改，如果它发生更改，如果勾选checkbox，我会将其复制到下一个表单。
如果默认情况下用户勾选checkbox我复制到lowerform，然后对第一个表单所做的任何更改都会复制到更低的形式。
如果checkbox为unchecked，我根本不会复制。
$scope.IsAddressClone = function() {
if ($scope.address.value) {
$scope.permanentAddress = angular.copy($scope.localAddress);
}
}
$scope.$watchCollection('localAddress', function(nv, ov) {
if (nv !== ov) {
$scope.IsAddressClone();
}
})
答案 4 :(得分：0)
您可以使用angular的复制方法将一个对象复制到另一个对象。例如，如果您要将送货地址相关数据复制到帐单邮寄地址，您可以按照以下方式进行操作：
$ scope.billing = angular.copy（$ scope.shipping）;
Refer this detailed example and explanation。我还提供了jsfiddle链接来测试。希望这会有所帮助。