Skip to content

Commit babd79a

Browse files
author
isteven
committed
fixed helper elements bug on single selection mode
1 parent f199adc commit babd79a

File tree

2 files changed

+63
-54
lines changed

2 files changed

+63
-54
lines changed

‎angular-multi-select.css

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,12 @@
1212
float: left;
1313
}
1414

15+
/* ! create a "row" */
16+
.multiSelect .line {
17+
max-height: 34px;
18+
overflow: hidden;
19+
}
20+
1521
/* ! create a "column" */
1622
.multiSelect .acol {
1723
display: inline-block;
@@ -161,12 +167,6 @@
161167
.multiSelect .checkBoxContainer {
162168
display: inline-block;
163169
padding: 8px;
164-
165-
/* Enable this to set a height limit
166-
max-height:200px;
167-
overflow-y: scroll;
168-
*/
169-
170170
}
171171

172172
/* ! to show / hide the checkbox layer above */

‎angular-multi-select.js

Lines changed: 57 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,10 @@
22
* Angular JS Multi Select
33
* Creates a dropdown-like button with checkboxes.
44
*
5-
* Created: Tue, 14 Jan 2014 - 5:18:02 PM
5+
* Project started on: Tue, 14 Jan 2014 - 5:18:02 PM
6+
* Current version: 2.0.0
67
*
78
* Released under the MIT License
8-
*
99
* --------------------------------------------------------------------------------
1010
* The MIT License (MIT)
1111
*
@@ -75,12 +75,12 @@ angular.module( 'multi-select', ['ng'] ).directive( 'multiSelect' , [ '$sce', '$
7575
'<div class="checkboxLayer">' +
7676
'<form>' +
7777
'<div class="helperContainer" ng-if="displayHelper( \'filter\' ) || displayHelper( \'all\' ) || displayHelper( \'none\' ) || displayHelper( \'reset\' )">' +
78-
'<div ng-if="displayHelper( \'all\' ) || displayHelper( \'none\' ) || displayHelper( \'reset\' )">' +
78+
'<div class="line" ng-if="displayHelper( \'all\' ) || displayHelper( \'none\' ) || displayHelper( \'reset\' )">' +
7979
'<button type="button" ng-click="select( \'all\', $event );" class="helperButton" ng-if="!isDisabled && displayHelper( \'all\' )"> &#10003;&nbsp; Select All</button> ' +
80-
'<button type="button" ng-click="select( \'none\', $event );" class="helperButton" ng-if="!isDisabled && displayHelper( \'none\' )"> &times;&nbsp; Select None</button>&nbsp;' +
80+
'<button type="button" ng-click="select( \'none\', $event );" class="helperButton" ng-if="!isDisabled && displayHelper( \'none\' )"> &times;&nbsp; Select None</button>' +
8181
'<button type="button" ng-click="select( \'reset\', $event );" class="helperButton" ng-if="!isDisabled && displayHelper( \'reset\' )" style="float:right">&#8630;&nbsp; Reset</button>' +
8282
'</div>' +
83-
'<div style="position:relative" ng-if="displayHelper( \'filter\' )">' +
83+
'<div class="line" style="position:relative" ng-if="displayHelper( \'filter\' )">' +
8484
'<input placeholder="Search..." type="text" ng-click="select( \'filter\', $event )" ng-model="inputLabel.labelFilter" ng-change="updateFilter();$scope.getFormElements();" class="inputFilter" />' +
8585
'<button type="button" class="clearButton" ng-click="inputLabel.labelFilter=\'\';updateFilter();prepareGrouping();prepareIndex();select( \'clear\', $event )">&times;</button> ' +
8686
'</div>' +
@@ -213,44 +213,48 @@ angular.module( 'multi-select', ['ng'] ).directive( 'multiSelect' , [ '$sce', '$
213213

214214
// Show or hide a helper element
215215
$scope.displayHelper = function( elementString ) {
216-
if ( typeof attrs.helperElements === 'undefined' ) {
217-
return true;
218-
}
219-
switch( elementString.toUpperCase() ) {
220-
case 'ALL':
221-
if ( attrs.selectionMode && $scope.selectionMode.toUpperCase() === 'SINGLE' ) {
216+
217+
if ( attrs.selectionMode && $scope.selectionMode.toUpperCase() === 'SINGLE' ) {
218+
219+
switch( elementString.toUpperCase() ) {
220+
case 'ALL':
221+
return false;
222+
break;
223+
case 'NONE':
222224
return false;
223-
}
224-
else {
225-
if ( attrs.helperElements && $scope.helperElements.toUpperCase().indexOf( 'ALL' ) >= 0 ) {
226-
return true;
225+
break;
226+
case 'RESET':
227+
if ( typeof attrs.helperElements === 'undefined' ) {
228+
return true;
227229
}
228-
}
229-
break;
230-
case 'NONE':
231-
if ( attrs.selectionMode && $scope.selectionMode.toUpperCase() === 'SINGLE' ) {
232-
return false;
233-
}
234-
else {
235-
if ( attrs.helperElements && $scope.helperElements.toUpperCase().indexOf( 'NONE' ) >= 0 ) {
230+
else if ( attrs.helperElements && $scope.helperElements.toUpperCase().indexOf( 'RESET' ) >= 0 ) {
231+
return true;
232+
}
233+
break;
234+
case 'FILTER':
235+
if ( typeof attrs.helperElements === 'undefined' ) {
236+
return true;
237+
}
238+
if ( attrs.helperElements && $scope.helperElements.toUpperCase().indexOf( 'FILTER' ) >= 0 ) {
236239
return true;
237240
}
238-
}
239-
break;
240-
case 'RESET':
241-
if ( attrs.helperElements && $scope.helperElements.toUpperCase().indexOf( 'RESET' ) >= 0 ) {
242-
return true;
243-
}
244-
break;
245-
case 'FILTER':
246-
if ( attrs.helperElements && $scope.helperElements.toUpperCase().indexOf( 'FILTER' ) >= 0 ) {
247-
return true;
248-
}
249-
break;
250-
default:
251-
return false;
252-
break;
241+
break;
242+
default:
243+
break;
244+
}
245+
246+
return false;
253247
}
248+
249+
else {
250+
if ( typeof attrs.helperElements === 'undefined' ) {
251+
return true;
252+
}
253+
if ( attrs.helperElements && $scope.helperElements.toUpperCase().indexOf( elementString.toUpperCase() ) >= 0 ) {
254+
return true;
255+
}
256+
return false;
257+
}
254258
}
255259

256260
// call this function when an item is clicked
@@ -377,22 +381,27 @@ angular.module( 'multi-select', ['ng'] ).directive( 'multiSelect' , [ '$sce', '$
377381

378382
// single item click
379383
else {
380-
$scope.filteredModel[ index ][ $scope.tickProperty ] = !$scope.filteredModel[ index ][ $scope.tickProperty ];
381-
382-
// we refresh input model as well
383-
inputModelIndex = $scope.filteredModel[ index ][ $scope.indexProperty ];
384-
$scope.inputModel[ inputModelIndex ][ $scope.tickProperty ] = $scope.filteredModel[ index ][ $scope.tickProperty ];
385384

386385
// If it's single selection mode
387386
if ( attrs.selectionMode && $scope.selectionMode.toUpperCase() === 'SINGLE' ) {
388-
$scope.filteredModel[ index ][ $scope.tickProperty ] = true;
389-
for( i=0 ; i < $scope.filteredModel.length ; i++) {
390-
if ( i !== index ) {
391-
$scope.filteredModel[ i ][ $scope.tickProperty ] = false;
392-
}
387+
388+
// first, set everything to false
389+
for( i=0 ; i < $scope.filteredModel.length ; i++) {
390+
$scope.filteredModel[ i ][ $scope.tickProperty ] = false;
393391
}
392+
for( i=0 ; i < $scope.inputModel.length ; i++) {
393+
$scope.inputModel[ i ][ $scope.tickProperty ] = false;
394+
}
395+
394396
$scope.toggleCheckboxes( e );
395397
}
398+
399+
// then set the clicked item to true
400+
$scope.filteredModel[ index ][ $scope.tickProperty ] = true;
401+
402+
// we refresh input model as well
403+
inputModelIndex = $scope.filteredModel[ index ][ $scope.indexProperty ];
404+
$scope.inputModel[ inputModelIndex ][ $scope.tickProperty ] = $scope.filteredModel[ index ][ $scope.tickProperty ];
396405
}
397406

398407
$scope.clickedItem = angular.copy( item );

0 commit comments

Comments
 (0)