Angular Bootstrap modal - checkbox not bound to controller

Question

I'm using the modal from the Angular fork of Bootstrap 3: http://angular-ui.github.io/bootstrap/#/modal and I'm trying to use a checkbox inside the modal and get its value back in my main controller.

The checkbox value is well bound in the view but not in the controller of the modal. Here's an example of the problem: Plunker

The modal controller:

var ModalInstanceCtrl = function ($scope, $modalInstance) {

  $scope.checked = false;

  $scope.ok = function () {
    $modalInstance.close( $scope.checked);
  };

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

=> $scope.checked in the ok function doesn't contain the correct value...

The view:

<script type="text/ng-template" id="myModalContent.html">
    <div class="modal-header">
        <h3 class="modal-title">I'm a modal!</h3>
    </div>
    <div class="modal-body">
        <label>
          <input type="checkbox" ng-model="checked"> test
        </label><br/>
        Checked: {{checked}}
    </div>
    <div class="modal-footer">
        <button class="btn btn-primary" ng-click="ok()">OK</button>
        <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
    </div>
</script>

Any idea?

Thanks by advance

It doesn't seem like calling $modalInstance.close with a boolean works very well. If I put a String in there it works. No idea why. — ivarni
– ivarni, Commented May 27, 2014 at 9:57
I'm not sure the problem comes from that, I tried to use String inside the checkbox and it still doesn't work: plnkr.co/edit/uY44SiNdcI2Atp6pVWhq?p=preview — ValentinH
– ValentinH, Commented May 27, 2014 at 10:03
That's not what I meant. If you do $modalInstance.close('Hi, I am a String'); that works. See yarons, answer where he uses an object instead of a boolean. That's working around this exact problem. — ivarni
– ivarni, Commented May 27, 2014 at 10:21
You should probably ask the maintainers of UI Bootstrap if this is a bug or a feature. The docs does not say anything about using boolean primitives in the close function. — ivarni
– ivarni, Commented May 27, 2014 at 10:22

Yaron Schwimmer · Accepted Answer · 2014-05-27 10:06:49Z

2

A dirty trick that works is to put the checked parameter inside an object.

$scope.checked = {c:false};

$scope.ok = function () {
  $modalInstance.close( $scope.checked.c);
};

answered May 27, 2014 at 10:06

Yaron Schwimmer

5,3675 gold badges40 silver badges60 bronze badges

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

1 Comment

ValentinH Over a year ago

Indeed this works! I accept the answer even if I think this is not working as it should... :/

Riccardo · Accepted Answer · 2014-05-27 10:31:09Z

0

you can specify the checked value straight as a parameter of the function, this is a little workaround for bypassing the lack of the binding between the modal view and the associated controller:

<button class="btn btn-primary" ng-click="ok(checked)">OK</button>

And then pass it as function parameter in the controller:

$scope.ok = function (result) {
       $modalInstance.close( result);
};

Full working example here

answered May 27, 2014 at 10:31

Riccardo

1,5302 gold badges12 silver badges22 bronze badges

Collectives™ on Stack Overflow

Angular Bootstrap modal - checkbox not bound to controller

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related