angularjs動態更改模型綁定

Question

我有2種表格-帳單和運費。 如果用戶選中了一個復選框，則送貨地址應填寫賬單地址，然后將其禁用。 如果用戶取消選中此框，則送貨地址應為空白，然后重新啟用。

我現在可以使用$ watch進行此操作，但是感覺很hack。 我有兩個嵌套在彼此中的手表。 我想知道是否有更好的方法來實現自己的目標。

我嘗試在ng-model中使用三元運算符，如下所示，但這也不起作用。

<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" />

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 。

取消選中該復選框時，注銷$ watch並清除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