CODEWITHSUNDEEP
angularjstwitter-bootstrap
JQuery Mobile
JQuery Mobile

Reputation: 6291

Getting data from Modal in Bootstrap UI

I've been aggressively working on an app that uses AngularJS and Bootstrap. To help, I've included the Bootstrap UI framework. I am successfully opening a dialog and closing the dialog. However, I'm not sure how to actually "get" the data when a user clicks "Save Item".

My Plunker is Here

As shown in the Plunker above, I have my controller defined like this:

  var modalInstance = $modal.open({
    templateUrl: 'item-dialog.html',
    size: 'sm',
    controller: function($scope, $modalInstance) {
      $scope.saveItem = function () {
        alert('Saving...');

        alert('ID: ' + $scope.newItem.typeId);
        alert('Data: ' + $scope.newItem.data);
      };

      $scope.cancelItem = function() {
        $modalInstance.close(false);
      };
    }
  });

When I go to show the id of the item the user selected, and the text the user entered, it doesn't work. newItem is undefined. However, in the markup, you can see ng-model="newItem.data"

How do I get the information that the user entered in my controller?

Thank you!

Upvotes: 0

Views: 60

Answers (1)

ms87
ms87

Reputation: 17492

You are not passing the result back to the controller opening the modal when you close it, you just need to add this in the modal's controller:

$modalInstance.close($scope.newItem);

See plunk.

Another thing: I've found that if you do not manually initialize objects on the $scope of the modal controllers of angular ui, they do not get bound properly, hence the $scope.newItem={} in the controller of the modal.

Upvotes: 1

Related Questions