Confirmation dialog with data using AngularJS

Question

I am trying to make a dialog box that confirms the user wants to proceed. The situation is this: I have a table with may events. The user can decide to delete the event.

The table is built like this:

<tbody>
    <tr ng-repeat="event in EventsCtrl.events>
        <td>
            <a ng-click="event.updateStatusDone(event.eventid)" href="#">
                <i class="delete-icon"></i>  
            </a>
        </td>
        <td>{{event.timestamp}}</td>
        <td>{{event.date}}</td>
        ...

The relevant code in the controller looks like this:

app.controller('EventController', ['$http', function($http){
    this.updateStatusDone = function(eventid){
        $http.delete(serverUrl + "/manage/event/" + eventid);
    }
}

Now I'd like to add a confirmation box (I read about modal), that will ask the user to confirm. The eventid has to be passed through.

I've tried researching a lot about modal, but they all seem to alert, without passing the data required (eventid in this case).

Does anyone have a working example? A lead, some reference to give?

Thanks in advance!

AlexD · Accepted Answer · 2015-12-06 13:37:06Z

0

Here is a partial example to get you started, from something I wrote:

function createMessageBox($dialog, title, message, buttons) {
    var msgBox = $dialog.dialog({
        templateUrl: 'partials/dialogs/message_dialog.html',
        controller: 'MessageBoxController',
        backdrop: false,
        dialogClass: 'modal confirm-dialog movable',
        resolve: {
            model: function () {
                return {
                    title: title,
                    message: message,
                    buttons: buttons
                };
            }
        }
    });

    return msgBox;
}

As you can see I'm passing the title, message and buttons variables, and later using them in the message_dialog.html dialog.

answered Dec 6, 2015 at 13:37

AlexD

4,3306 gold badges42 silver badges66 bronze badges

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

3 Comments

Finkel Over a year ago

Do I need to create a dialog directive for this? Or am I missing something else? Do I need to call my function from the dialog's buttons?

AlexD Over a year ago

You just open it with msgBox.open(), then you can get return params from it and when the dialog closes, .then() will trigger.

Finkel Over a year ago

Sorry, I'm new to angular and I feel like I'm missing something. Where is the open function? Do you have a working fiddle/plunker maybe? Sorry for asking so much, but it doesn't seem to work for me

Community · Accepted Answer · 2017-05-23 11:44:37Z

0

I found the best thing so far to fit my situation here: https://stackoverflow.com/a/19930247/5459561

It actually calls my function only if accepted. One thing to keep in mind, it is not a good looking dialog box, that part still needs work.

edited May 23, 2017 at 11:44

CommunityBot

11 silver badge

answered Dec 7, 2015 at 11:02

Finkel

2831 gold badge3 silver badges18 bronze badges

Collectives™ on Stack Overflow

Confirmation dialog with data using AngularJS

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related