CODEWITHSUNDEEP
javascriptangularjs
slacker
slacker

Reputation: 157

Do something on radio button selection change AngularJS

I need to refresh some data depending on selection of a particular radio button group.

working plunker http://plnkr.co/edit/kZhsiU4pVpHhoscVkvMQ?p=preview

But I can get neither the ng-change nor the ng-click to execute my method which updates name and makes Hello World to show Hello 'selection'.

$scope.updateValue = function(){
    $scope.name = $scope.data.myNumber;
  };

But I can see that the two way data binding works - so the model is getting updated. 

<span>You selected {{ data.myNumber }}</span>

On a side note: another thing I tried is to watch the model value and execute what I want to do, but that does not work either - the watchcollection is not triggered ever again other than at page load.

The plunker is just a representation of the radio button selection problem - what I want to achieve in the data refresh is more complex.

Any help would be much appreciated.

Upvotes: 1

Views: 336

Answers (2)

Aᴍɪʀ
Aᴍɪʀ

Reputation: 7803

While other answers seem valid, what I would do for complex data communication is to use a service in between.

As you have two separate controllers, one in your main page and one for the modal, and their $scopes are different, I'd go for using a service for communication between two controllers. You can check this question out for more information on this.

Simply broadcast the changes on your modal, then listen for those changes on your main controller and reflect it on the HTML.

Upvotes: 1

Ritt
Ritt

Reputation: 3339

Instead of modifying the $scope variable for name, modify object property as it keeps the reference change.

change your html part of code to this...

 <div ng-controller="MainCtrl">
      <p>Hello {{data.name}}!</p>
      <button ng-click="OpenModal('sm')">Enter Number</button>
      <br><br>
      <span>You selected {{ data.myNumber }}</span>

  </div>

And your javascript controller to this...

app.controller('MainCtrl', function($scope, $modal) {
  $scope.name = 'World';
  $scope.data = {};

  $scope.OpenModal = function(size){
   var modalInstance = $modal.open({
            templateUrl: 'Modal.html',
            controller: 'ModalInstanceCtrl',
            windowClass: 'small-size-modal',
            size: size,
            scope: $scope
        });
  };
});

app.controller('ModalInstanceCtrl', function($scope, $modalInstance){
  $scope.ok = function(){
    $scope.data.name = $scope.data.myNumber;
    $modalInstance.close();

  };

  $scope.updateValue = function(){
    $scope.data.name = $scope.data.myNumber;
    $modalInstance.dismiss('submit');
  };

  $scope.cancel = function () {
    $modalInstance.dismiss('cancel');
  };
});

Working Plunker..

http://plnkr.co/edit/xL4b6imAkvwuNiuBuHxl?p=preview

Upvotes: 1

Related Questions