Skip to content
This repository has been archived by the owner on Oct 2, 2019. It is now read-only.

Limit the maximum number of selections allowed in multiple mode #1110

Merged
merged 3 commits into from
Aug 3, 2015
Merged

Limit the maximum number of selections allowed in multiple mode #1110

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
3a7c45e
Limit the number of selections allowed in multiple mode
cdjackson Jul 26, 2015
a4fd087
Merge branch 'master' of https://github.com/angular-ui/ui-select into…
cdjackson Jul 28, 2015
e28ecec
Added test to check multiple limit
cdjackson Aug 1, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions src/uiSelectDirective.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,9 @@ uis.directive('uiSelect',
$select.onSelectCallback = $parse(attrs.onSelect);
$select.onRemoveCallback = $parse(attrs.onRemove);

//Limit the number of selections allowed
$select.limit = (angular.isDefined(attrs.limit)) ? parseInt(attrs.limit, 10) : undefined;

//Set reference to ngModel from uiSelectCtrl
$select.ngModel = ngModel;

Expand Down
3 changes: 3 additions & 0 deletions src/uiSelectMultipleDirective.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -155,6 +155,9 @@ uis.directive('uiSelectMultiple', ['uiSelectMinErr','$timeout', function(uiSelec
};

scope.$on('uis:select', function (event, item) {
if($select.selected.length >= $select.limit) {
return;
}
$select.selected.push(item);
$selectMultiple.updateModel();
});
Expand Down
73 changes: 53 additions & 20 deletions test/select.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1754,34 +1754,67 @@ describe('ui-select tests', function() {

});

it('should watch changes for $select.selected and update formatted value correctly', function () {
it('should watch changes for $select.selected and update formatted value correctly', function () {

scope.selection.selectedMultiple = ['wladimir@email.com', 'samantha@email.com'];
scope.selection.selectedMultiple = ['wladimir@email.com', 'samantha@email.com'];

var el = compileTemplate(
'<ui-select multiple ng-model="selection.selectedMultiple" theme="bootstrap" style="width: 800px;"> \
<ui-select-match placeholder="Pick one...">{{$item.name}} &lt;{{$item.email}}&gt;</ui-select-match> \
<ui-select-choices repeat="person.email as person in people | filter: $select.search"> \
<div ng-bind-html="person.name | highlight: $select.search"></div> \
<div ng-bind-html="person.email | highlight: $select.search"></div> \
</ui-select-choices> \
</ui-select> \
'
);
var el = compileTemplate(
'<ui-select multiple ng-model="selection.selectedMultiple" theme="bootstrap" style="width: 800px;"> \
<ui-select-match placeholder="Pick one...">{{$item.name}} &lt;{{$item.email}}&gt;</ui-select-match> \
<ui-select-choices repeat="person.email as person in people | filter: $select.search"> \
<div ng-bind-html="person.name | highlight: $select.search"></div> \
<div ng-bind-html="person.email | highlight: $select.search"></div> \
</ui-select-choices> \
</ui-select> \
'
);

var el2 = compileTemplate('<span class="resultDiv" ng-bind="selection.selectedMultiple"></span>');
var el2 = compileTemplate('<span class="resultDiv" ng-bind="selection.selectedMultiple"></span>');

expect(el.find('.ui-select-match-item [uis-transclude-append]:not(.ng-hide)').text())
.toBe("Wladimir <wladimir@email.com>Samantha <samantha@email.com>");
expect(el.find('.ui-select-match-item [uis-transclude-append]:not(.ng-hide)').text())
.toBe("Wladimir <wladimir@email.com>Samantha <samantha@email.com>");

clickItem(el, 'Nicole');
clickItem(el, 'Nicole');

expect(el.find('.ui-select-match-item [uis-transclude-append]:not(.ng-hide)').text())
.toBe("Wladimir <wladimir@email.com>Samantha <samantha@email.com>Nicole <nicole@email.com>");
expect(el.find('.ui-select-match-item [uis-transclude-append]:not(.ng-hide)').text())
.toBe("Wladimir <wladimir@email.com>Samantha <samantha@email.com>Nicole <nicole@email.com>");

expect(scope.selection.selectedMultiple.length).toBe(3);
expect(scope.selection.selectedMultiple.length).toBe(3);

});
});

it('should ensure the multiple selection limit is respected', function () {

scope.selection.selectedMultiple = ['wladimir@email.com'];

var el = compileTemplate(
'<ui-select multiple limit="2" ng-model="selection.selectedMultiple" theme="bootstrap" style="width: 800px;"> \
<ui-select-match placeholder="Pick one...">{{$item.name}} &lt;{{$item.email}}&gt;</ui-select-match> \
<ui-select-choices repeat="person.email as person in people | filter: $select.search"> \
<div ng-bind-html="person.name | highlight: $select.search"></div> \
<div ng-bind-html="person.email | highlight: $select.search"></div> \
</ui-select-choices> \
</ui-select> \
'
);

var el2 = compileTemplate('<span class="resultDiv" ng-bind="selection.selectedMultiple"></span>');

expect(el.find('.ui-select-match-item [uis-transclude-append]:not(.ng-hide)').text())
.toBe("Wladimir <wladimir@email.com>");

clickItem(el, 'Samantha');
expect(el.find('.ui-select-match-item [uis-transclude-append]:not(.ng-hide)').text())
.toBe("Wladimir <wladimir@email.com>Samantha <samantha@email.com>");

clickItem(el, 'Nicole');

expect(el.find('.ui-select-match-item [uis-transclude-append]:not(.ng-hide)').text())
.toBe("Wladimir <wladimir@email.com>Samantha <samantha@email.com>");

expect(scope.selection.selectedMultiple.length).toBe(2);

});

it('should change viewvalue only once when updating modelvalue', function () {

Expand Down