ionicModal inside ng-repeat loop

ionic-v1
1

Hello,

I am building a app in which i need multiple modals, and the behavior will be same as shown in this link. How can we achieve the same in ionic.

2

Do not create multiple modals if they are very alike. Just create one and pass in the scope:

myModal.html:

<div class="modal transparent"
     ng-click="closeModal()">
    <h1>{{ person.name }}</h1>
</div>

controller:

$ionicModal.fromTemplateUrl('templates/myModal.html', {
    scope: $scope,
    animation: 'slide-in-up'
}).then(function(modal) {
    $scope.modal = modal;
});

$scope.persons = [{name: "AB"}, {name: "BC"}, {name: "CD"}];

Then when opening define the stuff you want in the modal:

// Open modal
$scope.openPerson = function(index) {
    $scope.person = $scope.persons[index];
    $scope.modal.show();
};
3

Hi @devqon1,

thanks for your reply, but when i am implementing it i am getting blank screen, can you make a fiddle of it, so i can get it.

4

Check out this codepen: http://codepen.io/anon/pen/OPbPgN

1 Like
5

Thank you very much @devqon1, i have a small doubt regarding this one. How to bind a input value in ionicmodal to the person names which are in the list. Check this pen, here when we are entering a value it is coming for all the three names, can we make it a one to one binding like if we type in Gordon Freeman modal it should come under Gordon Freeman name only.

6

Because you display the favourites from the currentPerson, not from the contact in the ng-repeat. So instead of:

<div>{{currentPerson.favourite}}</div>

you should write:

<div>{{contact.favourite}}</div>
1 Like