Unable to delete selected rows of a table created with directive on single button click

Question

I am trying to implement the functionality of deleting multiple selected rows of table with single button click. When I implement this functionality on a simple table created without directive it works fine: Working Plunker

But when I try to implement the same on the table created using reusable directive, it does not work: Non Working Plunker

Below is the code for my table with directive:

Index HTML:





    My App

_dataTable.html:


    
    
        
            {{th.Name}}
            
            
                
            
        
    
    
    
    
        
            {{cell.Type === 'Normal' ? row[cell.Name] : ''}}

JS:

// Code goes here
var appRoot = angular.module('demoapp', ['ngRoute', 'ui.bootstrap']);



  /*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/
 //-------------------Directive-------------------//
/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/
appRoot.directive('ngDataTable', function () {
    return {
        restrict: 'C',
        replace: true,
        scope: {
            ngDt: "=ngDt"
        },
        templateUrl: "_dataTable.html"
    };
});

  /*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/
 //-------------------Directive-------------------//
/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/



  /*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/
 //--------------------Service--------------------//
/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/
appRoot.service('MyService', function () {
    return {
        SelctedIds: [],
        updateSelected: function (action, id) {
            if (action === 'add' && this.SelctedIds.indexOf(id) === -1) {
                this.SelctedIds.push(id);
            }
            if (action === 'remove' && this.SelctedIds.indexOf(id) !== -1) {
                this.SelctedIds.splice(this.SelctedIds.indexOf(id), 1);
            }
        },
        selectRowChanged: function ($event, id) {
            var checkbox = $event.target;
            var action = (checkbox.checked ? 'add' : 'remove');
            this.updateSelected(action, id);
            return this.SelctedIds;
        },
        selectAll: function ($event, obj, identifierKey) {
            var tempAllIds = [];
            angular.forEach(obj, function (value, key) {
                tempAllIds.push(value[identifierKey]);
            });
            var checkbox = $event.target;
            var action = (checkbox.checked ? 'add' : 'remove');
            for (var i = 0; i < tempAllIds.length; i++) {
                var id = tempAllIds[i];
                this.updateSelected(action, id);
            }
            return this.SelctedIds;
        },
        isRowSelected: function (id) {
            return this.SelctedIds.indexOf(id) >= 0;
        },
        getSelectedClass: function (id, selectionClassName) {
            return this.isRowSelected(id) ? selectionClassName : '';
        },
        isSelectedAllRows: function (obj) {
            if (obj !== undefined) {
                return this.SelctedIds.length === obj.length;
            } else {
                return false;
            }

        }
    };
});
  /*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/
 //--------------------Service--------------------//
/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/

appRoot.controller('TableCtrl', function ($scope, MyService) {
    $scope.Demo = {};

    $scope.Demo.Rows = [
        { "Id": "1", "Name": "Row1", "IsDeleted": false },
        { "Id": "2", "Name": "Row2", "IsDeleted": false },
        { "Id": "3", "Name": "Row3", "IsDeleted": false }
    ];

    $scope.Demo.Headers = [
        { "Name": "Select", "Type": "Selectable" },
        { "Name": "Name", "Type": "Normal" }
    ];

    $scope.Demo.Cells = [
        { "Name": "Select", "Type": "Selectable" },
        { "Name": "Name", "Type": "Normal" }
    ];



    $scope.Demo.IsDeleteMultipleRowsIconVisible = false;

    //----------------Multiple Delete----------------//
    $scope.Demo.SelectedRows = [];
    $scope.Demo.selectRowChanged = function ($event, row) {
        var id = row.Id;
        $scope.Demo.SelectedRows = MyService.selectRowChanged($event, id);
    };

    $scope.Demo.isRowSelected = function (row) {
        var id = row.Id;
        return MyService.isRowSelected(id);
    };

    $scope.Demo.selectAllRows = function ($event) {
        $scope.Demo.SelectedRows = MyService.selectAll($event, $scope.Demo.Rows, "Id");
    };


    $scope.Demo.isSelectedAllRows = function () {
        return MyService.isSelectedAllRows($scope.Demo.Rows);
    };

    $scope.Demo.getRowClass = function (row) {
        var className = "";
        if ($scope.Demo.SelectedRows.length > 0) {
            className = MyService.getSelectedClass(row.Id, "bg-danger-muted");
        }
        if ($scope.Demo.SelectedRows.length > 0) {
            $scope.Demo.IsDeleteMultipleRowsIconVisible = true;
        } else {
            $scope.Demo.IsDeleteMultipleRowsIconVisible = false;
        }
        return className;
    };

    $scope.Demo.deleteRow = function () {
        for (var i = 0; i < $scope.Demo.SelectedRows.length; i++) {
            for (var j = 0; j < $scope.Demo.Rows.length; j++) {
                if ($scope.Demo.SelectedRows[i] === $scope.Demo.Rows[j].Id) {
                    $scope.Demo.Rows[j].IsDeleted = true;
                }
            }
        }
    };
    //----------------Multiple Delete----------------//
});

What am I missing? Is there any better way to acomplish the same task to reduce the amount of code and make it more reusable?

Pankaj Parkar · Accepted Answer

You could use ng-repeat="row in ngDt.Rows| filter: {IsDeleted: false}" filter the Rows on basis of IsDeleted flag.

Markup


    
        {{cell.Type === 'Normal' ? row[cell.Name] : ''}}

Plunkr Here

Unable to delete selected rows of a table created with directive on single button click

Answers (2)

Related Questions