CODEWITHSUNDEEP
javascriptangularjstwitter-bootstrapangular-ui-bootstrap
onkami
onkami

Reputation: 9431

bootstrap-angular modal dialog: can not return value from select

I have an angular-bootstrap modal dialog with the following template (jade syntax): 

div.modal-body
  select(ng-model="chosenProject" id="chosenProject",  ng-options="c.value as c.name for c in selectItems")
div.modal-footer
  button.btn.btn-primary(ng-click="ok()")   Change project
  button.btn.btn-warning(ng-click="cancel()")  Cancel

The pre-filling of the array works just fine. Dialog is configured with its controller that defines trivial ok() function, below is the excepmt from controller's body:

        $scope.chosenProject = 0;  // needed to have selected initial item with value=-1 in the select
        $scope.ok = function () {
            console.log("OK clicked, chosenProject " + $scope.chosenProject);
            $modalInstance.close($scope.chosenProject);
        };

The functions work fine. Accodring to console.log, $scope.chosenProject remains the same regardiless of what I chose in select and simply returns whatever I preset in line "$scope.chosenProject = 0;". I appreciate an advice how to fix this.

Upvotes: 1

Views: 1488

Answers (2)

wayne
wayne

Reputation: 3410

You need to pass chosenProject back in

modalInstance.result.then(function(result) {
});

This is a very good simpler dialog service to use if you need a couple more dialog in one page.

Upvotes: 0

callmekatootie
callmekatootie

Reputation: 11228

The issue occurs because of a transclusion scope that exists between your controller and the modal template.

Try this instead - In the controller for the modal, replace:

$scope.chosenProject = 0;

with

$scope.chosenProject = {
    value: 0
};

And the modal template, replace

select(ng-model="chosenProject" id="chosenProject"  
       ng-options="c.value as c.name for c in selectItems")

with

select(ng-model="chosenProject.value" id="chosenProject" 
       ng-options="c.value as c.name for c in selectItems")

The selected project should then be captured properly.

Upvotes: 2

Related Questions