我在我的应用程序中使用此代码而无法全部选择：
'use strict';
/**
* @ngdoc function
* @name INSIDERSApp.controller:ReferentCtrl
* @description
* # ReferentCtrl
* Controller of the INSIDERSApp
*/
angular.module('INSIDERSApp')
.controller('ReferentCtrl', function (INSIDERSServices,$log,$scope,DTOptionsBuilder, DTColumnBuilder, $q,$filter) {
$scope.referents = this;
$scope.referents.selected = {};
$scope.referents.selectAll = false;
$scope.referents.toggleAll = toggleAll;
$scope.referents.toggleOne = toggleOne;
var titleHtml = '<input type="checkbox" ng-model="referents.selectAll" ng-click="referents.toggleAll(referents.selectAll, referents.selected)">';
$scope.referents.dtOptions = DTOptionsBuilder
.fromFnPromise(function() {
var defer = $q.defer();
INSIDERSServices.referents()
.success(function(data){
defer.resolve(data);
}).error(function(data){
$log.error("ERROR can't get liste of referents");
});
return defer.promise;
})
.withPaginationType('full_numbers')
.withLightColumnFilter({
'1' : {
type : 'text'
},
'2' : {
type : 'text'
},
'3' : {
type : 'text'
},
'4' : {
type : 'text'
},
'5' : {
type : 'text'
},
'6' : {
type : 'text'
},
'7' : {
type : 'text'
},
'8' : {
type : 'text'
}
})
.withOption('paging', true)
.withOption('searching', true)
.withOption('info', true)
.withLanguageSource('app/styles/plugins/datatables/json/French.json')
.withDOM(
"<'row'<'col-sm-7'l><'col-sm-5'f>>" +
"<'row'<'col-sm-12'tr>>" +
"<'row'<'col-sm-7'i><'col-sm-5'p>>"
)
;
$scope.referents.dtColumns = [
DTColumnBuilder.newColumn(null).withTitle(titleHtml).notSortable().renderWith(function (data, type, full, meta) {
$scope.referents.selected[full.id] = false;
return '<input type="checkbox" ng-model="referents.selected[' + data.id + ']" ng-click="referents.toggleOne(referents.selected)">';
}),
DTColumnBuilder.newColumn('nom').withTitle('Nom'),
DTColumnBuilder.newColumn('prenom').withTitle('Prénom'),
DTColumnBuilder.newColumn('fonction').withTitle('Fonction'),
DTColumnBuilder.newColumn('profil').withTitle('Profil'),
DTColumnBuilder.newColumn('etat').withTitle('MAJ Liste').renderWith(function(data, type) {
if(data === true) return "Oui";
else return "Non";
}),
DTColumnBuilder.newColumn('dateMaj').withTitle('Date de MAJ Liste').renderWith(function(data, type) {
return $filter('date')(data, 'dd/MM/yyyy'); //date filter
}),
DTColumnBuilder.newColumn('dateRelance').withTitle('Date de relance').renderWith(function(data, type) {
return $filter('date')(data, 'dd/MM/yyyy'); //date filter
}),
DTColumnBuilder.newColumn('dateNotif').withTitle('Date de Notification').renderWith(function(data, type) {
return $filter('date')(data, 'dd/MM/yyyy'); //date filter
})
];
function toggleAll (selectAll, selectedItems) {
$log.log("IN toggleAll");
for (var id in selectedItems) {
if (selectedItems.hasOwnProperty(id)) {
selectedItems[id] = selectAll;
}
}
}
function toggleOne (selectedItems) {
$log.log("IN toggleOne");
for (var id in selectedItems) {
if (selectedItems.hasOwnProperty(id)) {
if(!selectedItems[id]) {
$scope.referents.selectAll = false;
return;
}
}
}
$scope.referents.selectAll = false;
}
});
<div class="main-container content-active">
<div class="content">
<div ng-controller="ReferentCtrl as referents">
<p class="text-danger">You selected the following rows:</p>
<p>
</p><pre>{{ referents.selected |json }}</pre>
<p></p>
<table datatable="" dt-options="referents.dtOptions" dt-columns="referents.dtColumns" width="100%" class="table table-striped table-bordered"></table></div> </div>
我遵循本教程： [在此处输入图像说明] [1] http://l-lin.github.io/angular-datatables/archives/#!/rowSelect
任何帮助，但它不起作用!!
答案 0 :(得分：0)
我找到了解决方案： 我添加了'createdRow＆＃39;和＆＃39; headerCallback＆＃39;在我的代码和我的Controller函数中的$ compile：
'use strict';
/**
* @ngdoc function
* @name INSIDERSApp.controller:ReferentCtrl
* @description # ReferentCtrl Controller of the INSIDERSApp
*/
angular
.module('INSIDERSApp')
.controller(
'ReferentCtrl',
function(INSIDERSServices,$compile, $log, $scope, DTOptionsBuilder,
DTColumnBuilder, $q, $filter) {
$scope.referents = this;
$scope.referents.selected = {};
$scope.referents.selectAll = false;
$scope.referents.toggleAll = toggleAll;
$scope.referents.toggleOne = toggleOne;
var titleHtml = '<input type="checkbox" ng-model="referents.selectAll" ng-click="referents.toggleAll(referents.selectAll, referents.selected)">';
$scope.referents.dtOptions = DTOptionsBuilder
.fromFnPromise(
function() {
var defer = $q.defer();
INSIDERSServices
.referents()
.success(function(data) {
defer.resolve(data);
})
.error(
function(data) {
$log
.error("ERROR can't get liste of referents");
});
return defer.promise;
})
.withPaginationType('full_numbers')
.withLightColumnFilter({
'1' : {
type : 'text'
},
'2' : {
type : 'text'
},
'3' : {
type : 'text'
},
'4' : {
type : 'text'
},
'5' : {
type : 'text'
},
'6' : {
type : 'text'
},
'7' : {
type : 'text'
},
'8' : {
type : 'text'
}
})
.withOption('paging', true)
.withOption('searching', true)
.withOption('info', true)
.withOption('createdRow', function(row, data, dataIndex) {
$compile(angular.element(row).contents())($scope);
})
.withOption('headerCallback', function(header) {
if (!$scope.referents.headerCompiled) {
$scope.referents.headerCompiled = true;
$compile(angular.element(header).contents())($scope);
}
})
.withLanguageSource(
'app/styles/plugins/datatables/json/French.json')
.withDOM(
"<'row'<'col-sm-7'l><'col-sm-5'f>>"
+ "<'row'<'col-sm-12'tr>>"
+ "<'row'<'col-sm-7'i><'col-sm-5'p>>");
$scope.referents.dtColumns = [
DTColumnBuilder
.newColumn(null)
.withTitle(titleHtml)
.notSortable()
.renderWith(
function(data, type, full, meta) {
$scope.referents.selected[full.id] = false;
return '<input type="checkbox" ng-model="referents.selected['
+ data.id
+ ']" ng-click="referents.toggleOne(referents.selected)">';
}),
DTColumnBuilder.newColumn('nom').withTitle('Nom'),
DTColumnBuilder.newColumn('prenom').withTitle(
'Prénom'),
DTColumnBuilder.newColumn('fonction').withTitle(
'Fonction'),
DTColumnBuilder.newColumn('profil').withTitle(
'Profil'),
DTColumnBuilder.newColumn('etat').withTitle(
'MAJ Liste').renderWith(
function(data, type) {
if (data === true)
return "Oui";
else
return "Non";
}),
DTColumnBuilder.newColumn('dateMaj').withTitle(
'Date de MAJ Liste').renderWith(
function(data, type) {
return $filter('date')(data,
'dd/MM/yyyy'); // date filter
}),
DTColumnBuilder.newColumn('dateRelance').withTitle(
'Date de relance').renderWith(
function(data, type) {
return $filter('date')(data,
'dd/MM/yyyy'); // date filter
}),
DTColumnBuilder.newColumn('dateNotif').withTitle(
'Date de Notification').renderWith(
function(data, type) {
return $filter('date')(data,
'dd/MM/yyyy'); // date filter
}) ];
function toggleAll(selectAll, selectedItems) {
$log.log("IN toggleAll");
for ( var id in selectedItems) {
if (selectedItems.hasOwnProperty(id)) {
selectedItems[id] = selectAll;
}
}
}
function toggleOne(selectedItems) {
$log.log("IN toggleOne");
for ( var id in selectedItems) {
if (selectedItems.hasOwnProperty(id)) {
if (!selectedItems[id]) {
$scope.referents.selectAll = false;
return;
}
}
}
$scope.referents.selectAll = true;
}
});<div class="main-container content-active">
<div class="content">
<div ng-controller="ReferentCtrl as referents">
<p class="text-danger">You selected the following rows:</p>
<p>
</p><pre>{{ referents.selected |json }}</pre>
<p></p>
<table datatable="" dt-options="referents.dtOptions" dt-columns="referents.dtColumns" width="100%" class="table table-striped table-bordered dataTable no-footer"></table>
</div>
</div>
</div>