Setting checkbox value when modal closes in Angular

Question

I am trying to automatically check a checkbox when a modal closes. I am using one controller for the modal and another controller for the main page. The code below isn't working. Do I need to use a directive in order to accomplish this, or is there another way?

HTML - Main Page:

<label>
  <input type="checkbox" ng-model="agreementForm.value1"> I agree.
</label>

HTML - Modal:

<div class="modal-footer">
 <button ng-click="agreementForm.cancel()" class="btn btn-warning">Cancel</button>
  <button ng-click="agreementForm.agree()" ng-disabled="agreementForm.$invalid" class="btn btn-primary" >I agree</button>
</div>

Javascript for Controllers:

myApp.controller('AgreementFormCtrl', function ($location, $stateParams, $modalInstance) {
  var agreementForm = this;
  agreementForm.cancel = function () {
  $modalInstance.dismiss('cancel');
};

agreementForm.agree = function() {
  agreementForm.value1=true;
  $modalInstance.close(agreementForm.selected);
});

myApp.controller('ContactFormCtrl',
   function ($location, $stateParams, Contacts) {
     var contactForm = this;
  });
   contactForm.save = function () {
     Contacts.$add(contactForm.contact).then(function (data) {
       $location.path('/');
     });
   };

Router for Modal:

.state('payment.agreement', {
url: '/agreement',
onEnter: ['$stateParams', '$state', '$modal', function ($stateParams, $state, $modal) {
   $modal.open({
       templateUrl: 'views/agreement.html',
       controller: 'AgreementFormCtrl as agreementForm'
      }
    )
      .result.finally(function () {
        $state.go('^');
      });
  }]
})

Are you sure the agreementForm.agree() function is actually being called and executes without error? Bootstrap UI modals have some scope considerations which may be the problem here, see stackoverflow.com/questions/18924577/… — Fasermaler
– Fasermaler, Commented Mar 11, 2015 at 8:12
@Fasermaler Thanks for the link. I think agreementForm.agree() is working OK. When I click it, the modal closes. And I'm not seeing any errors in my console. — Ken
– Ken, Commented Mar 11, 2015 at 8:18

Ramesh Rajendran · Accepted Answer · 2015-03-11 08:11:27Z

1

your can do it by using $rootScope and also you missed to initialzed the $scope

First you need to add ng-checked directive in the checkbox

 <input type="checkbox" **ng-checked="agreementForm.IsChecked"**
  ng-model="agreementForm.value1"> I agree.

Then you need initialize the rootscope in your controller

myApp.controller('AgreementFormCtrl', function ($location, $stateParams, $modalInstance,**$rootScope,$scope**) { //code };

and finally you can assign the value for checked object when a modal closes

$scope.agreementForm.cancel = function () {
  $modalInstance.dismiss('cancel');
$rootScope.agreementForm.IsChecked="Checked";//True or false
};

answered Mar 11, 2015 at 8:11

Ramesh Rajendran

38.9k49 gold badges159 silver badges241 bronze badges

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

6 Comments

Ken Over a year ago

Thank you. I've heard that it's a bad idea to use rootScope unless absolutely necessary. Is it OK to use in this instance? As you can see, I'm still learning...

Fasermaler Over a year ago

I need to type faster, I was asking the same thing of Ramesh. Obviously just doing stuff in root scope will solve any problems with the scope hierarchy you may have, but I think you should also be able to do it without this rather drastic alternative.

Ramesh Rajendran Over a year ago

I think your problem will be solved with using rootscope. It's not good. but if you called a model object to other controler, it might me used.

Ken Over a year ago

@Ramesh Rajendran I didn't use $scope because I'm trying to use the As Controller syntax. Did I use it incorrectly?

Ramesh Rajendran Over a year ago

if you using angularjs,then the variables are you should be $scope variables

|

Collectives™ on Stack Overflow

Setting checkbox value when modal closes in Angular

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related