CODEWITHSUNDEEP
angularjsnode.jstwitter-bootstrapcrud
Greg
Greg

Reputation: 473

Angular CRUD delete row from modal

I am using a simple CRUD API in MEAN STACK with a delete function

 app.delete('/api/users/:user_id', function(req, res) {
    users.remove({
        _id : req.params.user_id
    }, function(err, user) {
        if (err)
            res.send(err);
        users.find(function(err, users) {
            if (err)
                res.send(err)
            res.json(users);
        });
    });
});

The controller

var app = angular.module('usersList', []);
app.controller('usersController', function($scope, $http) {

$http.get('/api/users')
    .success(function(userData) {
        $scope.users = userData;
        $scope.length = userData.length;
    })
    .error(function(data) {
        console.log('Error: ' + data);
    });

$scope.deleteUser = function(id) {
    $http.delete('/api/users/' + id)
        .success(function(data) {
            $scope.users = data;
            console.log(data);
        })
        .error(function(data) {
            console.log('Error: ' + data);
        });
};

});

In the HTML file I populate a table as follow with a btn to open modal with corresponding user details by getting the {{$index}}

 <body data-ng-controller="usersController">            
        <table>
            <thead>
                <tr>
                    <th>#</th>
                    <th>ID</th>
                    <th>Login</th>
                    <th>Email</th>
                    <th>Action</th>
                </tr>
            </thead>
            <tbody>
                <tr data-ng-repeat="userData in users" >
                    <td><input type="checkbox"/></td>
                    <td>{{ userData._id }}</td>
                    <td>{{ userData.id_userLogin }}</td>
                    <td>{{ userData.email }}</td>
                    <td>                            
                        <!-- Button trigger for Delete modal -->
                        <button type="button" data-toggle="modal" data-target="#deleteModal{{$index}}" data-ng-click="Clear()">
                        <span class="glyphicon glyphicon-trash"></span>
                        </button>
                        <!-- Delete Modal -->
                        <div class="modal fade" id="deleteModal{{$index}}" tabindex="-1" role="dialog">
                          <div class="modal-dialog">
                            <div class="modal-content">
                              <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                <h4 class="modal-title" id="myModalLabel">Delete <strong>{{ userData.id_userLogin }}</strong> account</h4>
                              </div>
                              <div class="modal-body">
                                <div class="alert alert-danger" role="alert">Are you sure you want to delete this account?</div>
                              </div>
                              <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                <button type="button" class="btn btn-danger" data-ng-click="deleteUser(user._id)">Delete</button>
                              </div>
                            </div>
                          </div>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>

How can I use the API to delete the corresponding user from the modal as following does not work

<button type="button" class="btn btn-danger" data-ng-click="deleteUser(user._id)">Delete</button>

Screenshot

It is important that the modal is not a confirm delete popup but a modal with content from where the delete button will delete the corresponding user. Any help would be appreciated.

Upvotes: 2

Views: 3922

Answers (1)

Huy Hoang Pham
Huy Hoang Pham

Reputation: 4147

Seem like the problem is solved. I'll just post the answer here. The html of the button should be: 

<button type="button" class="btn btn-danger" data-ng-click="deleteUser(userData._id)">Delete</button>
<!-- Use userData._id instead of user._id-->

Upvotes: 3

Related Questions