Showing multiple modals in a loop

Question

I'm using Angular UI Modals ( http://angular-ui.github.io/bootstrap/#modal )

I have to show the same modal, multiple times in a loop.

For example I have a team, and I need to show the edit team member modal for each person in succession (basically it's a wizard)

The problem I have is that it opens ALL the modals, stacked on top of each other, and I'd like to get them to open one at a time.

for (var i = 0; i < team.SizeLimit; i++) {
    var participant = { }; // assume this hold the correct participant

    var openModal = $modal.open({
        templateUrl: '/Modals/Participant/Edit.html',
        backdrop: true,
        windowClass: 'modal',
        controller: 'ModalParticipantController',
        resolve: {
            title: function () { return 'Edit Participant'; },
            participant: function () { return participant; }
        }
    });

    openModal.result.then(function (data) {
        alert('success!');
    }); 
}

How can I get it to open these in succession, as the modals are closed, one at a time?

Answer 1

I'm not an angularJs user, but i had this same problem a while back.

instead of creating the modals in a loop, you create a loop with the modals itself where you check the next participant when you close the current modal. (i'm guessing openModal.result.then() is the callback for that)

var fnOpenModal = function(i) {
        if (i >= team.sizeLimit)
            return;

        var participant = team[i],
            openModal = $modal.open({
                ....
            });

        openModal.result.then(function (data) {
            alert('success!');
            fnOpenModal(i + 1);
        });
    }
fnOpenModal(0);

it's definetly not the best solution, but it's a quick one that works :-)