pass id value to ionic modal on click

Question

I am using a click event to open a modal window like this ,

But on this click event i need to pass an id value so that i can dispaly the details wit respect to that id value .this is the controller part ,

           $ionicModal.fromTemplateUrl('modal.html', function($ionicModal) {
                $scope.modal = $ionicModal;
            }, {
                // Use our scope for the scope of the modal to keep it simple
                scope: $scope,
                // The animation we want to use for the modal entrance
                animation: 'slide-in-up'
            });  

is there any way to do this...???

Thanks.

Answer 1

If one needs to show up HTML content in model from scope. You will need to use

$scope.openModal = function(item) {
  $scope.modal=$ionicModal.fromTemplate('<ion-modal-view><b>'+item.id+'</b> 
  </ion-modal-view>',
  { animation: 'slide-in-up'});
  $scope.modal.open();
}

Answer 2

You assign the current scope to your modal, so you can just assign the variable to the $scope object:

$ionicModal.fromTemplateUrl('modal.html', function($ionicModal) {
    $scope.modal = $ionicModal;
}, {
    // Use our scope for the scope of the modal to keep it simple
    scope: $scope,
    // The animation we want to use for the modal entrance
    animation: 'slide-in-up'
});

$scope.openModal = function(id) {
    $scope.selectedId = id;
    $scope.modal.show();
}

And in your view:

<ul>
    <li ng-repeat="item in items"
        ng-click="openModal(item.id)">
        {{ item.name }}
    </li>
</ul>

Then you have access to the id in your modal:

<div class="modal">
    <h1>{{ selectedId }}</h1>
</div>