feat(templates): Support disabled options in select menu.

Author: miketierney

src/bootstrap/choices.tpl.html

@@ -4,7 +4,8 @@
   <li class="ui-select-choices-group">
     <div class="divider" ng-show="$select.isGrouped && $index > 0"></div>
     <div ng-show="$select.isGrouped" class="ui-select-choices-group-label dropdown-header">{{$group}}</div>
-    <div class="ui-select-choices-row" ng-class="{active: $select.isActive(this)}">
+    {{item}}
+    <div class="ui-select-choices-row" ng-class="{active: $select.isActive(this), disabled: $select.isDisabled(this)}">
       <a href="javascript:void(0)" class="ui-select-choices-row-inner"></a>
     </div>
   </li>

src/select.css

@@ -122,6 +122,13 @@
     background-color: #428bca;
 }
 
+.ui-select-bootstrap .ui-select-choices-row.disabled>a,
+.ui-select-bootstrap .ui-select-choices-row.active.disabled>a {
+    color: #777;
+    cursor: not-allowed;
+    background-color: #fff;
+}
+
 /* fix hide/show angular animation */
 .ui-select-match.ng-hide-add,
 .ui-select-search.ng-hide-add {

src/select.js

@@ -229,20 +229,35 @@
       return ctrl.items.indexOf(itemScope[ctrl.itemProperty]) === ctrl.activeIndex;
     };
 
+    ctrl.isDisabled = function(itemScope) {
+      var itemIndex = ctrl.items.indexOf(itemScope[ctrl.itemProperty]);
+      var isDisabled = false;
+      var item;
+
+      if (itemIndex >= 0) {
+        item = ctrl.items[itemIndex];
+        isDisabled = item.disabled;
+      }
+
+      return isDisabled;
+    };
+
     // When the user clicks on an item inside the dropdown
     ctrl.select = function(item) {
 
-      var locals = {};
-      locals[ctrl.parserResult.itemName] = item;
+      if (!item.disabled) {
+        var locals = {};
+        locals[ctrl.parserResult.itemName] = item;
 
-      ctrl.onSelectCallback($scope, {
-          $item: item,
-          $model: ctrl.parserResult.modelMapper($scope, locals)
-        });
+        ctrl.onSelectCallback($scope, {
+            $item: item,
+            $model: ctrl.parserResult.modelMapper($scope, locals)
+          });
 
-      ctrl.selected = item;
-      ctrl.close();
-      // Using a watch instead of $scope.ngModel.$setViewValue(item)
+        ctrl.selected = item;
+        ctrl.close();
+        // Using a watch instead of $scope.ngModel.$setViewValue(item)
+      }
     };
 
     // Closes the dropdown

src/select2/choices.tpl.html

@@ -2,7 +2,7 @@
   <li class="ui-select-choices-group" ng-class="{'select2-result-with-children': $select.isGrouped}">
     <div ng-show="$select.isGrouped" class="ui-select-choices-group-label select2-result-label">{{$group}}</div>
     <ul ng-class="{'select2-result-sub': $select.isGrouped, 'select2-result-single': !$select.isGrouped}">
-      <li class="ui-select-choices-row" ng-class="{'select2-highlighted': $select.isActive(this)}">
+      <li class="ui-select-choices-row" ng-class="{'select2-highlighted': $select.isActive(this), 'select2-disabled': $select.isDisabled(this)}">
         <div class="select2-result-label ui-select-choices-row-inner"></div>
       </li>
     </ul>

src/selectize/choices.tpl.html

@@ -2,7 +2,7 @@
   <div class="ui-select-choices-content selectize-dropdown-content">
     <div class="ui-select-choices-group optgroup">
       <div ng-show="$select.isGrouped" class="ui-select-choices-group-label optgroup-header">{{$group}}</div>
-      <div class="ui-select-choices-row" ng-class="{active: $select.isActive(this)}">
+      <div class="ui-select-choices-row" ng-class="{active: $select.isActive(this), disabled: $select.isDisabled(this)}">
         <div class="option ui-select-choices-row-inner" data-selectable></div>
       </div>
     </div>

test/select.spec.js

@@ -206,6 +206,49 @@ describe('ui-select tests', function() {
     expect(getMatchLabel(el)).toEqual('false');
   });
 
+  describe('disabled options', function() {
+    function createUiSelect() {
+      return compileTemplate(
+        '<ui-select ng-model="selection.selected"> \
+          <ui-select-match placeholder="Pick one...">{{$select.selected.name}}</ui-select-match> \
+          <ui-select-choices repeat="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>'
+      );
+    }
+
+    beforeEach(function() {
+      scope._people = angular.copy(scope.people);
+      scope.people = scope.people.map(function (person) {
+        if (person.name == 'Wladimir') {
+          person.disabled = true;
+        }
+        return person;
+      });
+
+      this.el = createUiSelect();
+    });
+
+    afterEach(function() {
+      scope.people = angular.copy(scope._people);
+    });
+
+    it('should not allow disabled options to be selected', function() {
+      clickItem(this.el, 'Wladimir');
+
+      expect(getMatchLabel(this.el)).not.toEqual('Wladimir');
+    });
+
+    it('should set a disabled class on the option', function() {
+      var option = $(this.el).find('.ui-select-choices-row div:contains("Wladimir")');
+      var container = option.closest('.ui-select-choices-row');
+
+      expect(container.hasClass('disabled')).toBeTruthy();
+    });
+  });
+
   describe('choices group', function() {
     function getGroupLabel(item) {
       return item.parent('.ui-select-choices-group').find('.ui-select-choices-group-label');