2016-04-11 14 views
1

「上記と同じ」郵送先住所と恒久住所を実装したいと思います。しかし、チェックボックスをオンにすると、郵送先住所と恒久住所が同じであることが示されません。助けて?AngularJS 1.5 - 上記の住所と同じ

コントローラ

$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> 
+1

'$ scope.candidateData.Address = angular.copy($ scope.candidateData.Address);'自分自身の値を自分自身にコピーします – devqon

+0

また、$ scope.candidateData.Addressには$にコピーしたい値がありますscope.candidateData.MailingAddress。あなたは逆割り当てをしています。 –

+0

私は候補candidateData.Addressと逆候補candidateData.MailingAddressですか?私はそれを試みたが、うまくいかなかった。 –

答えて

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 = {}; 
     } 
    }; 

あなたはあなたのコードでこれを実装する必要があります。

+0

角度のある素材でできますか? –

+0

それは動作しませんでした。角度バージョンは1.0.3ですが、1.5は使用しています –