4

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?

Improve this question
3
  • Why do you need another controller ModalDemoCtrl? I think you need to remove ng-controller="ModalDemoCtrl". Commented Jun 16, 2015 at 7:50
  • Where you are initializing or setting '$scope.items' i.e in controller or place where you are writing this? Commented Jun 16, 2015 at 7:55
  • My items are 'pushed' from a JsonObject (from a list somewhere else) It looks like this: $scope.items.push({ Title: jsonItemTitle, Id: jsonItemId }) / this is done inside 'myApp' controller, the main controller in other words. It is initialized there also, with: $scope.items = []; Commented Jun 16, 2015 at 8:04

3 Answers 3

Reset to default
9

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.

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

3 Comments

yes, I want to pass the item that's clicked on, but all attributes of that item (both Title, and Id so far), but this looks promising, thanks for the fast response, I will try this asap
@user3266024 I also did a small update to my answer, since the resolve function should be returning selectedItem instead of item. Please take this into account when testing,
oh yes, I noticed :), the same thing with '$scope.title = item.title; (should be selectedItem) But it worked as a charm! Thanks alot
0

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.

Improve this answer

Comments

0

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

Improve this answer

1 Comment

I will try this aswell, thanks for the fast response!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.