angularjs 모델 바인딩을 동적으로 변경합니다.

Question

청구서 발송에 2 가지 형식이 있습니다. 사용자가 체크 박스를 선택하면 배송 주소는 청구서 수신 주소로 채워져 사용 중지되어야합니다. 사용자가 상자의 선택을 취소하면 배송지 주소가 비어 있고 사용으로 돌아갑니다.

나는 지금이 시계를 $ watch와 함께 사용하고 있지만 해킹 된 느낌이 들었습니다. 나는 동일한 요소를 보면서 서로에 중첩 된 2 $ 시계를 가지고있다. 내가하는 일을 성취 할 수있는 더 좋은 방법이 있는지 알고 싶다.

아래의 ng 모델에서 삼항 연산자를 사용해 보았지만 작동하지 않았습니다.

A plunkr of my "working" code

<input ng-model="isSameAsBilling ? billName : shipName" ng-disabled="isSameAsBilling" /> 

는 HTML :

<input ng-model="billName" /> 

<input type="checkbox" ng-checked="isSameAsBilling" ng-click="sameAsBillingClicked()"/> 

<input ng-model="shipName" ng-disabled="isSameAsBilling" /> 

자바 스크립트 :

$scope.isSameAsBilling = false; 

$scope.sameAsBillingClicked = function(){ 
    $scope.isSameAsBilling = !$scope.isSameAsBilling; 
}; 

$scope.$watch('isSameAsBilling', function(isSame){ 

    if ($scope.isSameAsBilling) { 

    var shipNameWatcher = $scope.$watch('billName', function (newShipName) { 
     $scope.shipName = $scope.billName; 

     var secondBillWatcher = $scope.$watch('isSameAsBilling', function(isChecked){ 
     if (!isChecked){ 
      shipNameWatcher(); 
      secondBillWatcher(); 
      $scope.shipName = ''; 
     } 
     }); 
    }); 
    } 
}); 

Answer 1

나는 마침내 당신이 여기 계신있어 생각합니다.

확인란을 선택하면 billName에 $ watch가 등록되고 shipName으로 반영됩니다. 확인란을 선택하지 않은 경우

는 등록 해제는 $ 시계와는 shipName

angular 

    .module('app', []) 

    .controller('appController', ['$scope', function($scope){ 

    $scope.isSameAsBilling = false; 

    $scope.isSameChanged = function() { 
     if ($scope.isSameAsBilling) { 
     // register the watcher when checked 
     $scope.nameWatcher = $scope.$watch('billName', function(bName) { 
      $scope.shipName = bName 
     }) 
     } else { 
     // deregister the watcher and clear the shipName when unchecked 
     $scope.nameWatcher(); 
     $scope.shipName = '' 
     } 
    } 

    }]); 

을 지우고 여기에 나는 그것을 시도 PLUNK