Merge pull request #1110 from cdjackson/limit_multi_select

Limit the maximum number of selections allowed in multiple mode

Author: dimirc

src/uiSelectDirective.js

@@ -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;
 

src/uiSelectMultipleDirective.js

@@ -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();
       });

test/select.spec.js

@@ -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 () {