Javascript 如何使用angularjs和datatables单击按钮删除多行?
我使用的是Angularjs plus数据表。我正试图通过复选框删除该行或多行。每当我选中复选框时,都需要复选框id的状态,即在所选数组中。它类似于{“1”:true,“2”:false}true意味着id被选中。我被代码卡住了Javascript 如何使用angularjs和datatables单击按钮删除多行?,javascript,jquery,angularjs,Javascript,Jquery,Angularjs,我使用的是Angularjs plus数据表。我正试图通过复选框删除该行或多行。每当我选中复选框时,都需要复选框id的状态,即在所选数组中。它类似于{“1”:true,“2”:false}true意味着id被选中。我被代码卡住了 (function(angular) { 'use strict'; var app=angular.module('vehicle',['datatables','datatables.select','datatables.tabletools','
(function(angular) {
'use strict';
var app=angular.module('vehicle',['datatables','datatables.select','datatables.tabletools','ngResource','ui','ui.sortable','datatables.buttons']);
app.controller('dataCtrl',Vehicledata);
function Vehicledata($compile,$scope,$resource,DTOptionsBuilder,DTColumnBuilder){
$scope.selected = {};
$scope.selectedItems="";
$scope.selectAll = false;
$scope.toggleAll = toggleAll;
$scope.toggleOne = toggleOne;
var titleHtml = '<input ng-model="selectAll" ng-click="toggleAll(selectAll,selected)" type="checkbox">';
$scope.sortableOptions = {
'ui-floating': true
};
$scope.dtOptions = DTOptionsBuilder.fromFnPromise(function() {
return $resource('data.json').query().$promise;
})
.withOption('createdRow', function(row, data, dataIndex) {
$compile(angular.element(row).contents())($scope);
})
.withOption('headerCallback', function(header) {
if (!$scope.headerCompiled) {
$scope.headerCompiled = true;
$compile(angular.element(header).contents())($scope);
}
})
.withTableTools('<?php echo $base_url;?>assets/swf/copy_csv_xls_pdf.swf')
.withTableToolsButtons([
'print', {
'sExtends': 'collection',
'sButtonText': 'Save',
'aButtons': ['csv', 'xls', 'pdf']
}
])
.withPaginationType('full_numbers')
.withButtons([
{
text: 'Deactivate',
key: '1',
action: function (e, dt, node, config) {
//alert(JSON.stringify($scope.selected));
for(var id in $scope.selected){
alert($scope.selected.hasOwnProperty(id));
}
}
},
{
text: 'Activate',
key: '2',
action: function (e, dt, node, config) {
for(var id in $scope.selected){
alert($scope.selected.hasOwnProperty(id));
}
}
},
{
text: 'Delete',
key: '3',
action: function (e, dt, node, config) {
for(var id in $scope.selected){
alert($scope.selected.hasOwnProperty(id));
}
}
}
]);
$scope.dtColumns = [
//DTColumnBuilder.newColumn(null).withTitle('')
//.notSortable()
// Need to define the mRender function, otherwise we get a [Object Object]
//.renderWith(checkboxHtml),
DTColumnBuilder.newColumn(null).withTitle(titleHtml)
.notSortable()
.renderWith(function(data,type, full, meta) {
$scope.selected[full.Vehicle_id] = false;
return '<input ng-model="selected[' + data.Vehicle_id + ']" ng-click="toggleOne(selected)" type="checkbox">';
}),
DTColumnBuilder.newColumn('Vehicle_id').withTitle('ID').notVisible(),
DTColumnBuilder.newColumn('Vehicle_name').withTitle('Vehicle Name'),
DTColumnBuilder.newColumn(null).withTitle('Vehicle Image')
.notSortable()
.renderWith(imageHtml),
DTColumnBuilder.newColumn('Vehicle_passanger').withTitle('Max Passengers'),
DTColumnBuilder.newColumn('Vehicle_Luggage').withTitle('Max Luggage'),
DTColumnBuilder.newColumn('Agency_name').withTitle('Company'),
DTColumnBuilder.newColumn(null).withTitle('Status').renderWith(showStatus)
];
}
function imageHtml(data,type, full, meta) {
return '<img src='+data.Vehicle_image+' height=50 width=50>';
}
function checkboxHtml(data,type, full, meta) {
return '<input type="checkbox" value='+data.Vehicle_id+' class="vehical_id" name="vehical_id[]">';
}
function showStatus(data,type, full, meta){
if(data.Vehicle_status==1){
return "active";
}else{
return "inactive";
}
}
function toggleAll (selectAll,selectedItems) {
for (var id in selectedItems) {
if (selectedItems.hasOwnProperty(id)) {
selectedItems[id] = selectAll;
}
}
}
function toggleOne (selectedItems) {
for (var id in selectedItems) {
if (selectedItems.hasOwnProperty(id)) {
if(!selectedItems[id]) {
$scope.selectAll = false;
return;
}
}
}
$scope.selectAll = true;
}
})(angular);
感谢代码,但是。。。。。到底发生了什么事/你被困在哪里?请改为更新问题。当我单击“停用”按钮时,我需要状态为true的选定元素数组并将其删除。但我得到了真实身份的所有价值。您可以通过取消注释此//警报(JSON.stringify($scope.selected))进行检查;
[{"Vehicle_id":"1","Vehicle_name":"Sedan","Vehicle_company_id":"1","Vehicle_passanger":"5","Vehicle_Luggage":"5","Vehicle_image":"Photo.jpg","Vehicle_status":"1","Vehicle_sorting_ord":"1","Created":"2017-04-05 15:01:31","Agency_Id":"1","Agency_name":"Webtechstairs","Agency_Adress":"Mohali","Agency_Phonenumer":"0172456789","Agency_Email":"help.webtechstairs@gmail.com","Agency_Firstname":"Amit","Agency_Last_name":"Kumar","Agency_Status":"1","Agency_Created":"2016-09-22 11:58:36","Agency_Company_logo":"","Agency_Website":"www.webtechstairs.com","Agency_Packageid":"1","Agency_Tan_number":"BLQPK2240E"},{"Vehicle_id":"2","Vehicle_name":"SUV","Vehicle_company_id":"1","Vehicle_passanger":"7","Vehicle_Luggage":"7","Vehicle_image":"Jellyfish.jpg","Vehicle_status":"0","Vehicle_sorting_ord":"2","Created":"2017-04-04 16:31:02","Agency_Id":"1","Agency_name":"Webtechstairs","Agency_Adress":"Mohali","Agency_Phonenumer":"0172456789","Agency_Email":"help.webtechstairs@gmail.com","Agency_Firstname":"Amit","Agency_Last_name":"Kumar","Agency_Status":"1","Agency_Created":"2016-09-22 11:58:36","Agency_Company_logo":"","Agency_Website":"www.webtechstairs.com","Agency_Packageid":"1","Agency_Tan_number":"BLQPK2240E"}]