Handle disabled attribute

Author: tkrotoff

examples/select2-bootstrap3.html

@@ -87,6 +87,21 @@
         </div>
       </div>
 
+      <div class="form-group">
+        <label class="col-sm-3 control-label">Disabled</label>
+        <div class="col-sm-6">
+
+          <ui-select ng-model="person.selected" theme="select2" class="form-control" ng-disabled="true">
+            <match placeholder="Select or search a person in the list...">{{$select.selected.name}}</match>
+            <choices repeat="item in people | filter: $select.search">
+              <div ng-bind-html="trustAsHtml((item.name | highlight: $select.search))"></div>
+              <small ng-bind-html="trustAsHtml((item.email | highlight: $select.search))"></small>
+            </choices>
+          </ui-select>
+
+        </div>
+      </div>
+
     </fieldset>
   </form>
 

src/select.js

@@ -69,6 +69,10 @@ angular.module('ui.select', [])
       var $select = controllers[0];
       var ngModelCtrl = controllers[1];
 
+      attrs.$observe('disabled', function() {
+        $select.disabled = attrs.disabled ? true : false;
+      });
+
       scope.$watch('$select.selected', function(newVal, oldVal) {
         if (ngModelCtrl.$viewValue !== newVal) ngModelCtrl.$setViewValue(newVal);
       });

src/select2/select.tpl.html

@@ -1,7 +1,8 @@
 <div class="select2 select2-container"
-     ng-class="{'select2-container-active select2-dropdown-open': $select.open}">
+     ng-class="{'select2-container-active select2-dropdown-open': $select.open && !$select.disabled,
+                'select2-container-disabled': $select.disabled}">
   <div class="ui-select-match"></div>
-  <div ng-class="{'select2-display-none': !$select.open}"
+  <div ng-class="{'select2-display-none': !$select.open || $select.disabled}"
        class="select2-drop select2-with-searchbox select2-drop-active">
     <div class="select2-search">
       <input type="text"

test/select.spec.js

@@ -27,9 +27,15 @@ describe('ui-select tests', function() {
     return el;
   }
 
-  function createUiSelect() {
+  function createUiSelect(attrs) {
+    var attrsHtml = '';
+    if (attrs !== undefined) {
+      if (attrs.disabled !== undefined) { attrsHtml += ' ng-disabled="' + attrs.disabled + '"'; }
+      if (attrs.required !== undefined) { attrsHtml += ' ng-required="' + attrs.required + '"'; }
+    }
+
     return compileTemplate(
-      '<ui-select ng-model="selection"> \
+      '<ui-select ng-model="selection"' + attrsHtml + '> \
         <match placeholder="Pick one...">{{$select.selected.name}}</match> \
         <choices repeat="item in matches | filter: $select.search"> \
           <div ng-bind-html="trustAsHtml((item.name | highlight: $select.search))"></div> \
@@ -140,4 +146,15 @@ describe('ui-select tests', function() {
 
     expect(el.scope().$select.open).toEqual(false);
   });
+
+  it('should be disabled if the attribute says so', function() {
+    var el1 = createUiSelect({disabled: true});
+    expect(el1.scope().$select.disabled).toEqual(true);
+
+    var el2 = createUiSelect({disabled: false});
+    expect(el2.scope().$select.disabled).toEqual(false);
+
+    var el3 = createUiSelect();
+    expect(el3.scope().$select.disabled).toEqual(false);
+  });
 });