angularjs dynamically change model binding

Question

I have 2 forms - a billing and a shipping. If the user checks a checkbox, the shipping address should be populated with the billing address and turn disabled. If the user unchecks the box, the shipping address should be blank and return to enabled.

I have this working right now with $watch but it feels hacky. I have 2 $watches nested in eachother watching the same element. I want to know if there is a better way to achieve what I am doing.

I tried using a ternary operator in the ng-model like below but that didn't work either.

<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 = '';
        }
      });
    });
  }
});

jshanley · Accepted Answer · 2014-04-18 05:36:19Z

2

I think I've finally got what you're after here.

When the checkbox is checked, it registers a $watch on the billName and mirrors it to the shipName.

When the checkbox is unchecked, the deregisters the $watch and clears the 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 = ''
      }
    }

  }]);

and here is the PLUNK

edited Apr 18, 2014 at 5:36

answered Apr 18, 2014 at 3:24

jshanley

9,1382 gold badges39 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

VtoCorleone Over a year ago

I tried that but the problem is that you only capture that value in time. If you check the checkbox, the content will copy over but if you type something into billName, it won't reflect into shipName.

jshanley Over a year ago

Ah, lightbulb. Okay I get what the problem really is. Let me think on that

jshanley Over a year ago

Okay, you can do it with 2 watches, but they don't need to be nested. One watch on the billName that updates the shipName if the box is checked, and one on the checkbox value as I had before. Plunk

Collectives™ on Stack Overflow

angularjs dynamically change model binding

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related