angularjs動態更改模型綁定

Question

我有2個表單 - 一個帳單和一個發貨。如果用戶選中複選框，則應使用帳單地址填充送貨地址並禁用。如果用戶取消選中該框，則送貨地址應爲空白並返回到啓用狀態。

我現在用$ watch正在工作，但感覺很不舒服。我有兩隻手表嵌套在彼此看着相同的元素。我想知道是否有更好的方法來實現我正在做的事情。

我試過在下面的ng模型中使用三元運算符，但那也不起作用。

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

A plunkr of my "working" code

HTML：

<input ng-model="billName" /> 

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

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

的JavaScript：

$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