Skip to content
This repository was archived by the owner on Dec 16, 2019. It is now read-only.

Commit 7685d28

Browse files
pkempenaerspkempenaers
committed
If the list is filtered, select all will select only the filtered list
Similar to PR #236 of dotanshima. When keyboardControls are enabled enter in the search field also fires select all.
1 parent eaf793c commit 7685d28

File tree

3 files changed

+69
-17
lines changed

3 files changed

+69
-17
lines changed

‎pages/javascripts/pages/home/ExampleCtrl.js‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -227,12 +227,23 @@ angular.module('exampleApp').controller('ExampleCtrl', ['$scope', function($scop
227227
enableSearch: true
228228
};
229229

230-
$scope.example21model = [];
230+
$scope.example21model = [];
231231
$scope.example21data = [
232232
{ id: 1, label: "David"},
233233
{ id: 2, label: "Jhon"},
234234
{ id: 3, label: "Danny"}];
235235
$scope.example21settings = {
236236
showEnableSearchButton: true
237237
};
238+
239+
$scope.searchSelectAllModel = [];
240+
$scope.searchSelectAllData = [
241+
{ id: 1, label: "David" },
242+
{ id: 2, label: "Jhon" },
243+
{ id: 3, label: "Danny" }
244+
];
245+
$scope.searchSelectAllSettings = {
246+
enableSearch: true,
247+
keyboardControls: true
248+
};
238249
}]);

‎pages/javascripts/pages/home/home.html‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -311,6 +311,43 @@ <h3>Code</h3>
311311
{ id: 3, label: "Danny"}];
312312
$scope.example21settings = {
313313
showEnableSearchButton: true
314+
};
315+
</div>
316+
</div>
317+
</div>
318+
</uib-accordion-group>
319+
<uib-accordion-group heading="Search with select all and keyboard controls">
320+
<div class="row">
321+
<div class="col-xs-12 col-sm-6">
322+
<h3>Demo</h3>
323+
<div class="well">
324+
<div>
325+
<div ng-dropdown-multiselect="" options="searchSelectAllData" selected-model="searchSelectAllModel" extra-settings="searchSelectAllSettings"></div>
326+
</div>
327+
</div>
328+
</div>
329+
<div class="col-xs-12 col-sm-6">
330+
<h3>The model:</h3>
331+
<pre>{{searchSelectAllModel|json}}</pre>
332+
</div>
333+
</div>
334+
<div class="row">
335+
<div class="col-md-12">
336+
<h3>Code</h3>
337+
<div hljs language="javascript">
338+
// HTML
339+
<div ng-dropdown-multiselect="" options="searchSelectAllData" selected-model="searchSelectAllModel" extra-settings="searchSelectAllSettings"></div>
340+
// JavaScript
341+
$scope.searchSelectAllModel = [];
342+
$scope.searchSelectAllData = [
343+
{id: 1, label: "David"},
344+
{id: 2, label: "Jhon"},
345+
{id: 3, label: "Danny"}
346+
];
347+
$scope.searchSelectAllSettings = {
348+
enableSearch: true,
349+
showSelectAll: true,
350+
keyboardControls: true
314351
};
315352
</div>
316353
</div>

‎src/angularjs-dropdown-multiselect.js‎

Lines changed: 20 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -31,12 +31,12 @@ directiveModule.directive('ngDropdownMultiselect', ['$filter', '$document', '$co
3131
var template = '<div class="multiselect-parent btn-group dropdown-multiselect">';
3232
template += '<button type="button" class="dropdown-toggle" ng-class="settings.buttonClasses" ng-click="toggleDropdown()">{{getButtonText()}}&nbsp;<span class="caret"></span></button>';
3333
template += '<ul class="dropdown-menu dropdown-menu-form" ng-if="open" ng-style="{display: open ? \'block\' : \'none\', height : settings.scrollable ? settings.scrollableHeight : \'auto\' }" style="overflow: auto" >';
34-
template += '<li ng-if="settings.showCheckAll && settings.selectionLimit > 0"><a ng-keydown="keyDownLink($event)" data-ng-click="selectAll()" tabindex="-1" id="selectAll"><span class="glyphicon glyphicon-ok"></span> {{texts.checkAll}}</a>';
34+
template += '<li ng-if="settings.showCheckAll && settings.selectionLimit !== 1"><a ng-keydown="keyDownLink($event)" data-ng-click="selectAll()" tabindex="-1" id="selectAll"><span class="glyphicon glyphicon-ok"></span> {{texts.checkAll}}</a>';
3535
template += '<li ng-if="settings.showUncheckAll"><a ng-keydown="keyDownLink($event)" data-ng-click="deselectAll();" tabindex="-1" id="deselectAll"><span class="glyphicon glyphicon-remove"></span> {{texts.uncheckAll}}</a></li>';
3636
template += '<li ng-if="settings.showEnableSearchButton && settings.enableSearch"><a ng-keydown="keyDownLink($event); keyDownToggleSearch();" ng-click="toggleSearch($event);" tabindex="-1">{{texts.disableSearch}}</a></li>';
3737
template += '<li ng-if="settings.showEnableSearchButton && !settings.enableSearch"><a ng-keydown="keyDownLink($event); keyDownToggleSearch();" ng-click="toggleSearch($event);" tabindex="-1">{{texts.enableSearch}}</a></li>';
3838
template += '<li ng-if="(settings.showCheckAll && settings.selectionLimit > 0) || settings.showUncheckAll || settings.showEnableSearchButton" class="divider"></li>';
39-
template += '<li ng-if="settings.enableSearch"><div class="dropdown-header"><input type="text" class="form-control searchField" ng-keydown="keyDownSearchDefault($event); keyDownSearchSingle($event, input.searchFilter);" style="width: 100%;" ng-model="input.searchFilter" placeholder="{{texts.searchPlaceholder}}" /></li>';
39+
template += '<li ng-if="settings.enableSearch"><div class="dropdown-header"><input type="text" class="form-control searchField" ng-keydown="keyDownSearchDefault($event); keyDownSearch($event, input.searchFilter);" style="width: 100%;" ng-model="input.searchFilter" placeholder="{{texts.searchPlaceholder}}" /></li>';
4040
template += '<li ng-if="settings.enableSearch" class="divider"></li>';
4141

4242
if (groups) {
@@ -266,11 +266,13 @@ directiveModule.directive('ngDropdownMultiselect', ['$filter', '$document', '$co
266266
return '';
267267
};
268268

269-
$scope.selectAll = function () {
269+
$scope.selectAll = function() {
270+
var searchResult;
270271
$scope.deselectAll(false);
271272
$scope.externalEvents.onSelectAll();
272273

273-
angular.forEach($scope.options, function (value) {
274+
searchResult = $filter('filter')($scope.options, $scope.getFilter($scope.input.searchFilter));
275+
angular.forEach(searchResult, function (value) {
274276
$scope.setSelectedItem(value[$scope.settings.idProp], true);
275277
});
276278
};
@@ -419,19 +421,21 @@ directiveModule.directive('ngDropdownMultiselect', ['$filter', '$document', '$co
419421
}
420422
};
421423

422-
$scope.keyDownSearchSingle = function(event, searchFilter) {
424+
$scope.keyDownSearch = function(event, searchFilter) {
423425
var searchResult;
424-
if (!$scope.settings.keyboardControls) {
425-
return;
426-
}
427-
if ($scope.settings.selectionLimit === 1 && $scope.settings.enableSearch) {
428-
if (event.keyCode === 13) {
429-
searchResult = $filter('filter')($scope.options, $scope.getFilter(searchFilter));
430-
if (searchResult.length === 1) {
431-
$scope.setSelectedItem($scope.getPropertyForObject(searchResult[0], $scope.settings.idProp));
432-
}
433-
}
434-
}
426+
if (!$scope.settings.keyboardControls) {
427+
return;
428+
}
429+
if (event.keyCode === 13) {
430+
if ($scope.settings.selectionLimit === 1 && $scope.settings.enableSearch) {
431+
searchResult = $filter('filter')($scope.options, $scope.getFilter(searchFilter));
432+
if (searchResult.length === 1) {
433+
$scope.setSelectedItem($scope.getPropertyForObject(searchResult[0], $scope.settings.idProp));
434+
}
435+
} else if ($scope.settings.enableSearch) {
436+
$scope.selectAll();
437+
}
438+
}
435439
};
436440

437441
$scope.getFilter = function(searchFilter) {

0 commit comments

Comments
 (0)