我希望一个输入字段的值始终等于另一个输入字段

Question

我有一个复选框，用于将账单地址设置为邮寄地址，因此如果选中了复选框，则两个值将始终相同，即使其中一个更改。到目前为止，我可以在选中复选框后获得账单地址来复制邮寄地址，但是如果之后更改了值，则视图不会更新。以下是目前为止的内容:

createcustomer.html:

<section class="mainbar" data-ng-controller="createcustomer as vm">
<div class="col-md-4">
                            <label for="txtMailingAddress1">Address 1:</label>
                        </div>
                        <div class="col-md-8">
                            <input type="text" id="txtMailingAddress1" name="txtMailingAddress1" value="" data-ng-model="vm.MailingAddress1" class="form-control FloatLeft" required />
                        </div>
<input type="checkbox" id="checkboxSameAddress" data-ng-model="vm.IsBillingMailing" data-ng-change="vm.copyMailingAddress()" />Check if billing address same as mailing address
<div class="form-group">
                        <div class="col-md-4">
                            <label for="txtBillingAddress1">Address 1:</label>
                        </div>
                        <div class="col-md-8">
                            <input type="text" id="txtBillingAddress1" name="txtBillingAddress1" data-ng-model="vm.BillingAddress1" class="form-control FloatLeft" required />
                        </div>
                    </div>
</section>

createcustomer.js

function copyMailingAddress() {
            if (vm.IsBillingMailing) {
                vm.BillingAddress1 = vm.MailingAddress1;
            }
            else {
                vm.BillingAddress1 = '';
            }
        }

Answer 1

一切都错了。你需要应用一些Angular。这里有一种方法:

http://jsfiddle.net/RpfNd/

var app = angular.module('shippingApp', []);
app.controller('ShippingCtrl', function ($scope) {
    $scope.mailing = {
        first: 'Jon',
        last: 'Doe',
        address1: '123 Main Street'
    };
    $scope.billing = {};
    $scope.billing_same = false;
    $scope.$watch('billing_same',function(same_as_shipping) {
        if (same_as_shipping) {
            $scope.billing = $scope.mailing;
        }
        else {
            $scope.billing = {};   
        }
    });
});

Answer 2

编辑:没想到问题和angularjs有关。未在标题或问题中说明的。注意下面评论后的标签。Mods请删除这个答案，如果它是无用的这个页面。由于

---------- 原来的答案 -------------

更简单的解决方案(我似乎是出于懒惰而使用的)，在我看来，它也更安全，不会出错。

如果"使用相同的邮寄地址"被选中，然后禁用所有的账单地址字段与javascript/jQuery

然后当表单发布时，这样验证它(假设您使用php):

if(isset($_POST['checkboxSameAddress'])){
    $txtBillingAddress1 = $txtMailingAddress1;
    $txtBillingAddress2 = $txtMailingAddress2;
    //and so on
}

这样你就可以保证值是相同的，而不用使用jQuery/Javascript

注意:输入复选框需要name属性才能工作