Question

我想实现'与上面相同'的邮寄地址和永久地址。但是我勾选了复选框，它没有显示邮寄地址和永久地址是相同的。救命？

控制器

$scope.candidateData.MailingAddress = {};

$scope.$watch('mailingSameAsPermanent', function (value) {
    if (value) {
        $scope.candidateData.Address = $scope.candidateData.MailingAddress;
    } else {
        $scope.candidateData.Address = angular.copy($scope.candidateData.Address);
    }

部分HTML：

<h3>Permanent Address</h3>
                    <md-input-container class="md-block">
                        <label>Address</label>
                        <input name="add" ng-model="candidateData.Address.Address1">
                        <div ng-messages="CandidateDetails.add.$error">
                            <div ng-message="required">
                                Please enter your address
                            </div>
                        </div>
                    </md-input-container>

                    <md-input-container md-no-float class="md-block">
                        <input ng-model="candidateData.Address.Address2" placeholder="Address 2">
                    </md-input-container>

                    <div layout-gt-sm="row">


                        <md-input-container class="md-block" flex-gt-sm>
                            <label>Country</label>
                            <md-select ng-model="candidateData.Address.Country">
                                <md-option> <!--ng-repeat="country in countries" value="{{country.Country}}"-->>
                                    {{candidateData.Address.Country}}
                                </md-option>
                            </md-select>
                        </md-input-container>


                        <md-input-container class="md-block" flex-gt-sm>
                            <label>Zip Code</label>
                            <input name="postalCode" ng-model="candidateData.Address.Zip" placeholder="12345"
                                   required ng-pattern="/^[0-9]{5}$/">
                            <div ng-messages="CandidateDetails.postalCode.$error" role="alert" multiple>
                                <div ng-message="required" class="my-message">You must supply a zip code.</div>
                                <div ng-message="pattern" class="my-message">
                                    That doesn't look like a valid postal
                                    code.
                                </div>

                            </div>
                    </div>
                    <h3>Mailing Address</h3>

                    <md-checkbox ng-model="mailingSameAsPermanent" >
                        Tick if your mailing address is the same as your permanent address
                    </md-checkbox>
                    <div>
                        <md-input-container class="md-block">
                            <label>Address</label>
                            <input name="add" ng-model="candidateData.MailingAddress.Address1" ng-disabled="mailingSameAsPermanent">
                            <div ng-messages="CandidateDetails.add.$error">
                                <div ng-message="required">
                                    Please enter your address
                                </div>
                            </div>
                        </md-input-container>

                        <md-input-container md-no-float class="md-block">
                            <input ng-model="candidateData.MailingAddress.Address2" placeholder="Address 2" ng-disabled="mailingSameAsPermanent">
                        </md-input-container>

                        <div layout-gt-sm="row">


                            <md-input-container class="md-block" flex-gt-sm>
                                <label>Country</label>
                                <md-select ng-model="candidateData.Address.Country">
                                    <md-option>
                                        <!--ng-repeat="country in countries" value="{{country.Country}}"-->>
                                        {{candidateData.Address.Country}}
                                    </md-option>
                                </md-select>
                            </md-input-container>


                            <md-input-container class="md-block" flex-gt-sm>
                                <label>Zip Code</label>
                                <input name="postalCode" ng-model="candidateData.Address.Zip" placeholder="12345"
                                       required ng-pattern="/^[0-9]{5}$/">
                                <div ng-messages="CandidateDetails.postalCode.$error" role="alert" multiple>
                                    <div ng-message="required" class="my-message">You must supply a zip code.</div>
                                    <div ng-message="pattern" class="my-message">
                                        That doesn't look like a valid postal
                                        code.
                                    </div>

                                </div>
                        </div>
                    </div>

Answer 1

我以不同的方式实现了您想要实现的功能。

您可以查看以下链接以了解。

https://jsfiddle.net/alpeshprajapati/U3pVM/23941/

  $scope.permanent = {address:'helloworld', state: 'gujarat'};

  $scope.click = function(){    
        if($scope.sameasabove){
              $scope.mail = angular.copy($scope.permanent);
        } else {
              $scope.mail = {};
        }
  };

您需要在代码中实现此功能。

Answer 2

尝试这个

<input type="checkbox" ng-model="sameas" ng-click="!sameas?permanentAddress=presentAddress:permanentAddress={}" />

AngularJS 1.5 - 与上述地址相同

2 个答案: