CODEWITHSUNDEEP
angularjsionic-framework
a4DEVP
a4DEVP

Reputation: 351

pass id value to ionic modal on click

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.

Upvotes: 9

Views: 11125

Answers (2)

Arjun G N
Arjun G N

Reputation: 11

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();
}

Upvotes: 1

devqon
devqon

Reputation: 13997

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>

Upvotes: 13

Related Questions