angular-datatables: How to retrieve selected row data for Editing/Delete

Question

I have a edit button and delete button in every rows in the table. I want to find out which row data I have selected when I clicked on to the edit/delete button so that I could do the editing/delete and then update it into my database.

Could anyone guide me out on this?

app.js

    app.controller('trackingController', function(....) {
    var scope = $scope;
    scope.dtInstance = {};
    scope.persons = {};

    // create a message to display in our view
    scope.message = 'Welcome to Tracking Page';
    console.log("Tracking");

    scope.dtOptions =           DTOptionsBuilder.newOptions().withPaginationType('full_numbers').withOption('order', [0, 'asc']);
    scope.dtColumnDefs = [
        DTColumnDefBuilder.newColumnDef(3).notSortable()
    ];

    $resource('data.json').query().$promise.then(function(persons) {
        scope.persons = persons;
    });

    scope.deleteRow = function() {
        console.log("deleteRow");
        scope.log = 'You are trying to deleteRow the row: ';
    }

    scope.editRow = function() {
        console.log("edit");
        scope.log = 'You are trying to edit the row: ';
    }
});

index.html

<p class="text-danger"><strong>{{ log }}</strong></p>
<table class="table table-striped table-bordered" datatable="ng" dt-options="dtOptions" dt-column-defs="dtColumnDefs" dt-instance="dtInstance">
    <thead>
        <tr>
            <th>ID</th>
            <th>FirstName</th>
            <th>LastName</th>
            <th>Action</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="person in persons">
            <td>{{ person.id }}</td>
            <td>{{ person.firstName }}</td>
            <td>{{ person.lastName }}</td>
            <td>
                <div class="btn-group">
                    <button type="button" class="btn btn-default btn" ng-click="editRow();"><i class="glyphicon glyphicon-pencil"></i></button>
                    <button type="button" class="btn btn-default btn" ng-click="deleteRow();"><i class="glyphicon glyphicon-trash"></i></button>
                </div>
            </td>
        </tr>
    </tbody>
</table>

Answer 1

In case you need to know which person is being clicked

app.controller('trackingController', function(....) {
    var scope = $scope;
    scope.dtInstance = {};
    scope.persons = {};

    // create a message to display in our view
    scope.message = 'Welcome to Tracking Page';
    console.log("Tracking");

    scope.dtOptions =           DTOptionsBuilder.newOptions().withPaginationType('full_numbers').withOption('order', [0, 'asc']);
    scope.dtColumnDefs = [
        DTColumnDefBuilder.newColumnDef(3).notSortable()
    ];

    $resource('data.json').query().$promise.then(function(persons) {
        scope.persons = persons;
    });

    scope.deleteRow = function(person) {
        console.log(person);
        scope.log = 'You are trying to deleteRow the row: ';
    }

    scope.editRow = function(person) {
        console.log(person);
        scope.log = 'You are trying to edit the row: ';
    }
});

<p class="text-danger"><strong>{{ log }}</strong></p>
<table class="table table-striped table-bordered" datatable="ng" dt-options="dtOptions" dt-column-defs="dtColumnDefs" dt-instance="dtInstance">
    <thead>
        <tr>
            <th>ID</th>
            <th>FirstName</th>
            <th>LastName</th>
            <th>Action</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="person in persons">
            <td>{{ person.id }}</td>
            <td>{{ person.firstName }}</td>
            <td>{{ person.lastName }}</td>
            <td>
                <div class="btn-group">
                    <button type="button" class="btn btn-default btn" ng-click="editRow(person);"><i class="glyphicon glyphicon-pencil"></i></button>
                    <button type="button" class="btn btn-default btn" ng-click="deleteRow(person);"><i class="glyphicon glyphicon-trash"></i></button>
                </div>
            </td>
        </tr>
    </tbody>
</table>