Fatal编程技术网
  • javascript/
  • Javascript 无法删除单键单击时使用指令创建的表的选定行

Javascript 无法删除单键单击时使用指令创建的表的选定行

javascript html angularjs

Javascript 无法删除单键单击时使用指令创建的表的选定行,javascript,html,angularjs,angularjs-ng-repeat,ng-repeat,Javascript,Html,Angularjs,Angularjs Ng Repeat,Ng Repeat,我正在尝试通过单击一个按钮来实现删除表中多个选定行的功能。 当我在没有指令创建的简单表上实现此功能时，效果很好： 但当我尝试在使用reusable指令创建的表上实现相同的功能时，它不起作用： 以下是带指令的我的表格的代码： 索引HTML: <!DOCTYPE html> <html ng-app="demoapp"> <head> <title>My App</title> <link rel="styleshe

我正在尝试通过单击一个按钮来实现删除表中多个选定行的功能。 当我在没有指令创建的简单表上实现此功能时，效果很好：

但当我尝试在使用reusable指令创建的表上实现相同的功能时，它不起作用：

以下是带指令的我的表格的代码：

索引HTML:

<!DOCTYPE html>
<html ng-app="demoapp">

<head>
    <title>My App</title>
    <link rel="stylesheet" href="style.css">
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular-route.js"></script>
    <script src="//cdn.jsdelivr.net/angular.bootstrap/0.11.0/ui-bootstrap-tpls.min.js"></script>
    <script src="script.js"></script>
</head>

<body>
    <div ng-controller="TableCtrl" class="container">
        <div class="row">
            <div class="col-lg-12">
                <div class="">
                    <div class="table-responsive">
                        <div class="ng-data-table" ng-dt="Demo"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

<table class="table table-bordered table-condensed table-hover">
    <thead>
    <tr>
        <th ng-repeat="th in ngDt.Headers" class="text-center">
            {{th.Name}}
            <input ng-if="th.Type==='Selectable'" type="checkbox" ng-checked="ngDt.isSelectedAllRows()" ng-click="ngDt.selectAllRows($event)" class=""/>
            <a ng-if="th.Type === 'Selectable' && ngDt.IsDeleteMultipleRowsIconVisible === true " class="text-danger delete-icon" ng-click="ngDt.deleteRow()">
                <i class="fa fa-trash-o"></i>
            </a>
        </th>
    </tr>
    </thead>
    <tbody>
    <tr bindonce ng-repeat="row in ngDt.Rows" ng-class="ngDt.getRowClass(row);">
        <td ng-repeat="cell in ngDt.Cells" class="text-center col-lg-6 col-md-6 col-sm-6 col-xs-6">
            {{cell.Type === 'Normal' ? row[cell.Name] : ''}}
            <input ng-if="cell.Type === 'Selectable'" type="checkbox" ng-checked="ngDt.isRowSelected(row)" ng-click="ngDt.selectRowChanged($event,row)" />
        </td>
    </tr>
    </tbody>
</table>

// 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----------------//
});

<div ng-controller="TableCtrl" class="container">
        <div class="row">
            <div class="col-lg-12">
                <div class="">
                    <div class="table-responsive">
                        <div class="ng-data-table" ng-dt="Demo"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

<table class="table table-bordered table-condensed table-hover">
    <thead>
        <tr>
            <th ng-repeat="th in ngDt.Headers" class="text-center">
                {{th.Name}}
                <input ng-if="th.Type==='Selectable'" type="checkbox" ng-model="ngDt.IsAll" ng-click="ngDt.selectAllRows()" />
                <a ng-if="th.Type === 'Selectable' && ngDt.isShowDeleteBtn() === true " class="text-danger delete-icon" ng-click="ngDt.removeSelectedRows()">
                    <i class="fa fa-trash-o"></i>
                </a>
            </th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="row in ngDt.Rows" ng-class="{'warning' : row['IsSelected']}">
            <td ng-repeat="cell in ngDt.Cells">
                <input ng-if="cell.Type==='Selectable'" type="checkbox" ng-model="row['IsSelected']" ng-change="ngDt.isShowDeleteBtn()" />
                {{(cell.Type==='Normal')?row[cell.Name]:''}}
            </td>
        </tr>
    </tbody>
</table>

    var appRoot = angular.module('demoapp', []);

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

//--------------------Service--------------------//
appRoot.service('MyService', function () {
    return {
        isShowDeleteBtn: function ($scope) {
            var cnt = 0;
            for (var i = 0; i < $scope[$scope.ObjName].Rows.length; i++) {
                if ($scope[$scope.ObjName].Rows[i]['IsSelected'] === true) {
                    cnt++;
                    break;
                }
            }
            return (cnt > 0);
        },
        selectAllRows: function ($scope) {
            //check if all selected or not
            if ($scope[$scope.ObjName].IsAll === false) {
                //set all row selected
                angular.forEach($scope[$scope.ObjName].Rows, function (row, index) {
                    $scope[$scope.ObjName].Rows[index]['IsSelected'] = true;
                });
                $scope[$scope.ObjName].IsAll = true;
            } else {
                //set all row unselected
                angular.forEach($scope[$scope.ObjName].Rows, function (row, index) {
                    $scope[$scope.ObjName].Rows[index]['IsSelected'] = false;
                });
                $scope[$scope.ObjName].IsAll = false;
            }
        },
        removeSelectedRows: function ($scope) {
            //start from last index because starting from first index cause shifting
            //in the array because of array.splice()
            $scope[$scope.ObjName].SelectedIds = "";
            for (var i = $scope[$scope.ObjName].Rows.length - 1; i >= 0; i--) {
                if ($scope[$scope.ObjName].Rows[i].IsSelected) {
                    if ($scope[$scope.ObjName].SelectedIds === "") {
                        $scope[$scope.ObjName].SelectedIds += $scope[$scope.ObjName].Rows[i].Id;
                    } else {
                        $scope[$scope.ObjName].SelectedIds += "," + $scope[$scope.ObjName].Rows[i].Id;
                    }
                    //delete row from Rows
                    $scope[$scope.ObjName].Rows.splice(i, 1);
                }
            }
        }
    };
});
//--------------------Service--------------------\\

//------------------Controller-------------------//
appRoot.controller('TableCtrl', function ($scope, MyService) {
    $scope.Demo = {};
    $scope.ObjName = "Demo";
    $scope.Demo.IsAll = false;
    $scope.Demo.SelectedIds = "";
    $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.isShowDeleteBtn = function () {
        return MyService.isShowDeleteBtn($scope);
    }

    $scope.Demo.IsAll = false;
    $scope.Demo.selectAllRows = function () {
        MyService.selectAllRows($scope);
    };

    $scope.Demo.removeSelectedRows = function () {
        MyService.removeSelectedRows($scope);
    };
});
//------------------Controller-------------------\\


我的应用程序
\u dataTable.html:

<!DOCTYPE html>
<html ng-app="demoapp">

<head>
    <title>My App</title>
    <link rel="stylesheet" href="style.css">
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular-route.js"></script>
    <script src="//cdn.jsdelivr.net/angular.bootstrap/0.11.0/ui-bootstrap-tpls.min.js"></script>
    <script src="script.js"></script>
</head>

<body>
    <div ng-controller="TableCtrl" class="container">
        <div class="row">
            <div class="col-lg-12">
                <div class="">
                    <div class="table-responsive">
                        <div class="ng-data-table" ng-dt="Demo"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

<table class="table table-bordered table-condensed table-hover">
    <thead>
    <tr>
        <th ng-repeat="th in ngDt.Headers" class="text-center">
            {{th.Name}}
            <input ng-if="th.Type==='Selectable'" type="checkbox" ng-checked="ngDt.isSelectedAllRows()" ng-click="ngDt.selectAllRows($event)" class=""/>
            <a ng-if="th.Type === 'Selectable' && ngDt.IsDeleteMultipleRowsIconVisible === true " class="text-danger delete-icon" ng-click="ngDt.deleteRow()">
                <i class="fa fa-trash-o"></i>
            </a>
        </th>
    </tr>
    </thead>
    <tbody>
    <tr bindonce ng-repeat="row in ngDt.Rows" ng-class="ngDt.getRowClass(row);">
        <td ng-repeat="cell in ngDt.Cells" class="text-center col-lg-6 col-md-6 col-sm-6 col-xs-6">
            {{cell.Type === 'Normal' ? row[cell.Name] : ''}}
            <input ng-if="cell.Type === 'Selectable'" type="checkbox" ng-checked="ngDt.isRowSelected(row)" ng-click="ngDt.selectRowChanged($event,row)" />
        </td>
    </tr>
    </tbody>
</table>

// 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----------------//
});

<div ng-controller="TableCtrl" class="container">
        <div class="row">
            <div class="col-lg-12">
                <div class="">
                    <div class="table-responsive">
                        <div class="ng-data-table" ng-dt="Demo"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

<table class="table table-bordered table-condensed table-hover">
    <thead>
        <tr>
            <th ng-repeat="th in ngDt.Headers" class="text-center">
                {{th.Name}}
                <input ng-if="th.Type==='Selectable'" type="checkbox" ng-model="ngDt.IsAll" ng-click="ngDt.selectAllRows()" />
                <a ng-if="th.Type === 'Selectable' && ngDt.isShowDeleteBtn() === true " class="text-danger delete-icon" ng-click="ngDt.removeSelectedRows()">
                    <i class="fa fa-trash-o"></i>
                </a>
            </th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="row in ngDt.Rows" ng-class="{'warning' : row['IsSelected']}">
            <td ng-repeat="cell in ngDt.Cells">
                <input ng-if="cell.Type==='Selectable'" type="checkbox" ng-model="row['IsSelected']" ng-change="ngDt.isShowDeleteBtn()" />
                {{(cell.Type==='Normal')?row[cell.Name]:''}}
            </td>
        </tr>
    </tbody>
</table>

    var appRoot = angular.module('demoapp', []);

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

//--------------------Service--------------------//
appRoot.service('MyService', function () {
    return {
        isShowDeleteBtn: function ($scope) {
            var cnt = 0;
            for (var i = 0; i < $scope[$scope.ObjName].Rows.length; i++) {
                if ($scope[$scope.ObjName].Rows[i]['IsSelected'] === true) {
                    cnt++;
                    break;
                }
            }
            return (cnt > 0);
        },
        selectAllRows: function ($scope) {
            //check if all selected or not
            if ($scope[$scope.ObjName].IsAll === false) {
                //set all row selected
                angular.forEach($scope[$scope.ObjName].Rows, function (row, index) {
                    $scope[$scope.ObjName].Rows[index]['IsSelected'] = true;
                });
                $scope[$scope.ObjName].IsAll = true;
            } else {
                //set all row unselected
                angular.forEach($scope[$scope.ObjName].Rows, function (row, index) {
                    $scope[$scope.ObjName].Rows[index]['IsSelected'] = false;
                });
                $scope[$scope.ObjName].IsAll = false;
            }
        },
        removeSelectedRows: function ($scope) {
            //start from last index because starting from first index cause shifting
            //in the array because of array.splice()
            $scope[$scope.ObjName].SelectedIds = "";
            for (var i = $scope[$scope.ObjName].Rows.length - 1; i >= 0; i--) {
                if ($scope[$scope.ObjName].Rows[i].IsSelected) {
                    if ($scope[$scope.ObjName].SelectedIds === "") {
                        $scope[$scope.ObjName].SelectedIds += $scope[$scope.ObjName].Rows[i].Id;
                    } else {
                        $scope[$scope.ObjName].SelectedIds += "," + $scope[$scope.ObjName].Rows[i].Id;
                    }
                    //delete row from Rows
                    $scope[$scope.ObjName].Rows.splice(i, 1);
                }
            }
        }
    };
});
//--------------------Service--------------------\\

//------------------Controller-------------------//
appRoot.controller('TableCtrl', function ($scope, MyService) {
    $scope.Demo = {};
    $scope.ObjName = "Demo";
    $scope.Demo.IsAll = false;
    $scope.Demo.SelectedIds = "";
    $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.isShowDeleteBtn = function () {
        return MyService.isShowDeleteBtn($scope);
    }

    $scope.Demo.IsAll = false;
    $scope.Demo.selectAllRows = function () {
        MyService.selectAllRows($scope);
    };

    $scope.Demo.removeSelectedRows = function () {
        MyService.removeSelectedRows($scope);
    };
});
//------------------Controller-------------------\\


{{th.Name}
{{cell.Type=='Normal'？行[cell.Name]：'''}
JS:

<!DOCTYPE html>
<html ng-app="demoapp">

<head>
    <title>My App</title>
    <link rel="stylesheet" href="style.css">
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular-route.js"></script>
    <script src="//cdn.jsdelivr.net/angular.bootstrap/0.11.0/ui-bootstrap-tpls.min.js"></script>
    <script src="script.js"></script>
</head>

<body>
    <div ng-controller="TableCtrl" class="container">
        <div class="row">
            <div class="col-lg-12">
                <div class="">
                    <div class="table-responsive">
                        <div class="ng-data-table" ng-dt="Demo"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

<table class="table table-bordered table-condensed table-hover">
    <thead>
    <tr>
        <th ng-repeat="th in ngDt.Headers" class="text-center">
            {{th.Name}}
            <input ng-if="th.Type==='Selectable'" type="checkbox" ng-checked="ngDt.isSelectedAllRows()" ng-click="ngDt.selectAllRows($event)" class=""/>
            <a ng-if="th.Type === 'Selectable' && ngDt.IsDeleteMultipleRowsIconVisible === true " class="text-danger delete-icon" ng-click="ngDt.deleteRow()">
                <i class="fa fa-trash-o"></i>
            </a>
        </th>
    </tr>
    </thead>
    <tbody>
    <tr bindonce ng-repeat="row in ngDt.Rows" ng-class="ngDt.getRowClass(row);">
        <td ng-repeat="cell in ngDt.Cells" class="text-center col-lg-6 col-md-6 col-sm-6 col-xs-6">
            {{cell.Type === 'Normal' ? row[cell.Name] : ''}}
            <input ng-if="cell.Type === 'Selectable'" type="checkbox" ng-checked="ngDt.isRowSelected(row)" ng-click="ngDt.selectRowChanged($event,row)" />
        </td>
    </tr>
    </tbody>
</table>

// 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----------------//
});

<div ng-controller="TableCtrl" class="container">
        <div class="row">
            <div class="col-lg-12">
                <div class="">
                    <div class="table-responsive">
                        <div class="ng-data-table" ng-dt="Demo"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

<table class="table table-bordered table-condensed table-hover">
    <thead>
        <tr>
            <th ng-repeat="th in ngDt.Headers" class="text-center">
                {{th.Name}}
                <input ng-if="th.Type==='Selectable'" type="checkbox" ng-model="ngDt.IsAll" ng-click="ngDt.selectAllRows()" />
                <a ng-if="th.Type === 'Selectable' && ngDt.isShowDeleteBtn() === true " class="text-danger delete-icon" ng-click="ngDt.removeSelectedRows()">
                    <i class="fa fa-trash-o"></i>
                </a>
            </th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="row in ngDt.Rows" ng-class="{'warning' : row['IsSelected']}">
            <td ng-repeat="cell in ngDt.Cells">
                <input ng-if="cell.Type==='Selectable'" type="checkbox" ng-model="row['IsSelected']" ng-change="ngDt.isShowDeleteBtn()" />
                {{(cell.Type==='Normal')?row[cell.Name]:''}}
            </td>
        </tr>
    </tbody>
</table>

    var appRoot = angular.module('demoapp', []);

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

//--------------------Service--------------------//
appRoot.service('MyService', function () {
    return {
        isShowDeleteBtn: function ($scope) {
            var cnt = 0;
            for (var i = 0; i < $scope[$scope.ObjName].Rows.length; i++) {
                if ($scope[$scope.ObjName].Rows[i]['IsSelected'] === true) {
                    cnt++;
                    break;
                }
            }
            return (cnt > 0);
        },
        selectAllRows: function ($scope) {
            //check if all selected or not
            if ($scope[$scope.ObjName].IsAll === false) {
                //set all row selected
                angular.forEach($scope[$scope.ObjName].Rows, function (row, index) {
                    $scope[$scope.ObjName].Rows[index]['IsSelected'] = true;
                });
                $scope[$scope.ObjName].IsAll = true;
            } else {
                //set all row unselected
                angular.forEach($scope[$scope.ObjName].Rows, function (row, index) {
                    $scope[$scope.ObjName].Rows[index]['IsSelected'] = false;
                });
                $scope[$scope.ObjName].IsAll = false;
            }
        },
        removeSelectedRows: function ($scope) {
            //start from last index because starting from first index cause shifting
            //in the array because of array.splice()
            $scope[$scope.ObjName].SelectedIds = "";
            for (var i = $scope[$scope.ObjName].Rows.length - 1; i >= 0; i--) {
                if ($scope[$scope.ObjName].Rows[i].IsSelected) {
                    if ($scope[$scope.ObjName].SelectedIds === "") {
                        $scope[$scope.ObjName].SelectedIds += $scope[$scope.ObjName].Rows[i].Id;
                    } else {
                        $scope[$scope.ObjName].SelectedIds += "," + $scope[$scope.ObjName].Rows[i].Id;
                    }
                    //delete row from Rows
                    $scope[$scope.ObjName].Rows.splice(i, 1);
                }
            }
        }
    };
});
//--------------------Service--------------------\\

//------------------Controller-------------------//
appRoot.controller('TableCtrl', function ($scope, MyService) {
    $scope.Demo = {};
    $scope.ObjName = "Demo";
    $scope.Demo.IsAll = false;
    $scope.Demo.SelectedIds = "";
    $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.isShowDeleteBtn = function () {
        return MyService.isShowDeleteBtn($scope);
    }

    $scope.Demo.IsAll = false;
    $scope.Demo.selectAllRows = function () {
        MyService.selectAllRows($scope);
    };

    $scope.Demo.removeSelectedRows = function () {
        MyService.removeSelectedRows($scope);
    };
});
//------------------Controller-------------------\\

//代码在这里
var approt=angular.module（'demoapp'，['ngRoute'，'ui.bootstrap']）；
/*XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/
//-------------------指示-------------------//
/*XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/
批准指令（'ngDataTable'，函数（）{
返回{
限制：“C”，
替换：正确，
范围：{
ngDt:“=ngDt”
},
templateUrl:“\u dataTable.html”
};
});
/*XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/
//-------------------指示-------------------//
/*XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/
/*XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/
//--------------------服务--------------------//
/*XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/
批准服务（'MyService'，函数（）{
返回{
SelctedIds:[]，
updateSelected:函数（操作，id）{
if（action=='add'&&this.selcteds.indexOf（id）==-1）{
this.selectedids.push（id）；
}
if（action=='remove'&&this.selcteds.indexOf（id）！=-1）{
this.selctedds.splice（this.selctedds.indexOf（id），1）；
}
},
selectRowChanged:function（$event，id）{
var复选框=$event.target；
var action=（checkbox.checked？'add'：'remove'）；
此.updateSelected（操作，id）；
返回此.selcteds；
},
selectAll:功能（$event、obj、identifierKey）{
var-tempAllIds=[]；
角度forEach（对象、函数（值、键）{
tempAllIds.push（值[identifierKey]）；
});
var复选框=$event.target；
var action=（checkbox.checked？'add'：'remove'）；
对于（变量i=0；i=0；
},
getSelectedClass:函数（id，selectionClassName）{
返回此.isRowSelected（id）？selectionClassName:“”；
},
isSelectedAllRows:函数（obj）{
如果（对象！==未定义）{
返回this.selcteds.length==obj.length；
}否则{
返回false；
}
}
};
});
/*XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/
//--------------------服务--------------------//
/*XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/
批准控制器（'TableCtrl'，函数（$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=[
{“名称”：“选择”，“类型”：“可选”}，
{“名称”：“名称”，“类型”：“正常”}
];
$scope.Demo.Cells=[
{“名称”：“选择”，“类型”：“可选”}，
{“名称”：“名称”，“类型”：“正常”}
];
$scope.Demo.IsDeleteMultipleRowsIconVisible=false；
//----------------多次删除----------------//
$scope.Demo.SelectedRows=[]；
$scope.Demo.selectRowChanged=函数（$event，row）{
var id=row.id；
$scope.Demo.SelectedRows=MyService.selectRowChanged（$event，id）；
};
$scope.Demo.isRowSelected=函数（行）{
var id=row.id；
返回MyService.isRowSelected（id）；
};
$scope.Demo.selectAllRows=函数（$event）{
$scope.Demo.SelectedRows=MyService.selectAll（$event，$scope.Demo.Rows，“Id”）；
};
$scope.Demo.isSelectedAllRows=函数（）{
返回MyService.isSelectedAllRows（$scope.Demo.Rows）；
};
$scope.Demo.getRowClass=函数（行）{
var className=“”；
如果（$scope.Demo.SelectedRows.length>0）{
className=MyService.getSelectedClass（row.Id，“bg危险静音”）；
}
如果（$scope.Demo.SelectedRows.length>0）{
$scope.Demo.IsDeleteMultipleRowsIconVisible=true；
}否则{
$scope.Demo.IsDeleteMultipleRowsIconVisible=false；
}
返回类名；
};
$scope.Demo.deleteRow=函数（）{
对于（变量i=0；i<$scope.Demo.SelectedRows.length；i++）{
对于（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；
}
}
}
};
//----------------多次删除----------------//
});
我错过了什么？有没有更好的方法来完成相同的任务以减少代码量并使其更易于重用？

您可以使用
ng repeat=“ngDt.Rows中的row | filter:{Is