angularJS pass object attributes to modal

Question

I want to pass a whole object to modal, so I can view all of its attributes there. Right now I have items that look like this:

$scope.items = [{ Title: title, Id: id }] 

In my html page i am using a 'ng-repeat', something like this:

<tr ng-repeat="item in items | filter:search">
<td> {{item.Title}} </td>
<td> {{item.Id}} </td>
<td> <button ng-controller="ModalDemoCtrl" type="button" ng-click="viewItem(item)" class="btn btn-primary">View Item</button> </td>

and my modal html page:

<div class="modal-header">
  <h3>{{Title }}</h3>
</div>
<div class="modal-body">
  <p>{{ Id }}</p>
</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>

Only enough to see if we can get our two values.

But I have no idea how my modalController should look like, I can't seem to pass the whole item (with only title, and id so far) to the modal view.

I have followed the example on the angular bootstrap github page when making my controller:

angular.module('ui.bootstrap.demo').controller('ModalDemoCtrl', function ($scope, $modal, $log) {

$scope.viewItem = function () {

var modalInstance = $modal.open({
  templateUrl: 'myModalContent.html',
  controller: 'ModalInstanceCtrl',
  resolve: {
    items: function () {
      return $scope.items;
    }
  }
});

modalInstance.result.then(function (selectedItem) {
  $scope.selected = selectedItem;
}, function () {
  $log.info('Modal dismissed at: ' + new Date());
});
};

angular.module('ui.bootstrap.demo').controller('ModalInstanceCtrl', function ($scope, $modalInstance, items) {

$scope.items = items;
$scope.selected = {
item: $scope.items[0]
};

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

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

I am aware that this wont work, I can't type my actual controller at this moment, I will update later tonight with it. Any thoughts though on how this can be achieved?

Answer 1

If I understand correctly what you are after you don't need to pass the whole list of items to your modal, you should only pass the item the user has clicked on. This is actually the item that is passed as argument to your viewItem function, so you would have something like this:

$scope.viewItem = function (selectedItem) {
  var modalInstance = $modal.open({
    templateUrl: 'myModalContent.html',
    controller: 'ModalInstanceCtrl',
    resolve: {
      item: function () {
        return selectedItem;
      }
    }
  });
}

and then in your modal controller:

angular.module('ui.bootstrap.demo').controller('ModalInstanceCtrl', function ($scope, $modalInstance, item) {
  $scope.title = item.title;
  $scope.id = item.id
});

Or you can just assign the item being passed to your modal controller to the $scope.item variable and use {{item.title}} and {{item.id}} in your HTML instead.

Answer 2

I think you don't need to create another controller, you can use your current. And show modal window with directives ng-show or ng-if. It's not necessary use two controllers for one view. One controller - one view.

If you want create modal window and use it in different parts of your project, you can create directive and use it to create modal windows your application.

Answer 3

When creating the Items function I would pass an object so then you can call it in your modal ctrl like so:

angular.module('ui.bootstrap.demo').controller('ModalDemoCtrl', function ($scope, $modal, $log) {

$scope.viewItem = function () {

var modalInstance = $modal.open({
  templateUrl: 'myModalContent.html',
  controller: 'ModalInstanceCtrl',
  resolve: {
    items: function () {
      return myItems: $scope.items;
    }
  }
});

modalInstance.result.then(function (selectedItem) {
  $scope.selected = selectedItem;
  }, function () {
  $log.info('Modal dismissed at: ' + new Date());
  });
};

angular.module('ui.bootstrap.demo').controller('ModalInstanceCtrl', function ($scope, $modalInstance, items) {

$scope.items = items.myItems;
$scope.selected = {
item: $scope.items[0]
};

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

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

I have it working in my app like this. Hope it helps