我正在尝试实现通过单击按钮删除表中多个选定行的功能。 当我在没有指令的情况下创建的简单表上实现此功能时，它工作正常: Working Plunker
但是当我尝试在使用可重用指令创建的表上实现相同的操作时，它不起作用: Non Working Plunker
下面是我的带有指令的表的代码:
索引 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>
_dataTable.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>
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----------------//
});
我错过了什么？有没有更好的方法来完成相同的任务以减少代码量并使其更可重用？
最佳答案
您可以使用 ng-repeat="row in ngDt.Rows| filter: {IsDeleted: false}" 根据 IsDeleted 标志过滤行。
标记
<tr bindonce ng-repeat="row in ngDt.Rows| filter: {IsDeleted: true}" 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>
关于javascript - 单击按钮时无法删除使用指令创建的表的选定行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31901609/