feat(templates): Let user define disabling expression.

Author: miketierney

src/select.js

@@ -156,6 +156,7 @@
     ctrl.resetSearchInput = undefined; // Initialized inside uiSelect directive link function
     ctrl.refreshDelay = undefined; // Initialized inside uiSelectChoices directive link function
     ctrl.multiple = false; // Initialized inside uiSelect directive link function
+    ctrl.disableChoiceExpression = undefined; // Initialized inside uiSelect directive link function
 
     ctrl.isEmpty = function() {
       return angular.isUndefined(ctrl.selected) || ctrl.selected === null || ctrl.selected === '';
@@ -304,9 +305,10 @@
       var isDisabled = false;
       var item;
 
-      if (itemIndex >= 0) {
+      if (itemIndex >= 0 && !angular.isUndefined(ctrl.disableChoiceExpression)) {
         item = ctrl.items[itemIndex];
-        isDisabled = item.disabled;
+        isDisabled = !!(itemScope.$eval(ctrl.disableChoiceExpression)); // force the boolean value
+        item._uiSelectChoiceDisabled = isDisabled; // store this for later reference
       }
 
       return isDisabled;
@@ -315,7 +317,7 @@
     // When the user clicks on an item inside the dropdown
     ctrl.select = function(item) {
 
-      if (!item.disabled) {
+      if (!item._uiSelectChoiceDisabled) {
         var locals = {};
         locals[ctrl.parserResult.itemName] = item;
 
@@ -833,6 +835,8 @@
 
           $select.parseRepeatAttr(attrs.repeat, groupByExp); //Result ready at $select.parserResult
 
+          $select.disableChoiceExpression = attrs.uiDisableChoice;
+
           if(groupByExp) {
             var groups = element.querySelectorAll('.ui-select-choices-group');
             if (groups.length !== 1) throw uiSelectMinErr('rows', "Expected 1 .ui-select-choices-group but got '{0}'.", groups.length);

test/select.spec.js

@@ -267,45 +267,160 @@ describe('ui-select tests', function() {
   });
 
   describe('disabled options', function() {
-    function createUiSelect() {
+    function createUiSelect(attrs) {
+      var attrsDisabled = '';
+      if (attrs !== undefined) {
+        if (attrs.disabled !== undefined) {
+          attrsDisabled = ' ui-disable-choice="' + attrs.disabled + '"';
+        } else {
+          attrsDisabled = '';
+        }
+      }
+
       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"> \
+          <ui-select-choices repeat="person in people | filter: $select.search"' + attrsDisabled + '> \
             <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;
+    function disablePerson(opts) {
+      opts = opts || {};
+
+      var key = opts.key || 'people',
+          disableAttr = opts.disableAttr || 'disabled',
+          disableBool = opts.disableBool === undefined ? true : opts.disableBool,
+          matchAttr = opts.match || 'name',
+          matchVal = opts.matchVal || 'Wladimir';
+
+      scope['_' + key] = angular.copy(scope[key]);
+      scope[key].map(function (model) {
+        if (model[matchAttr] == matchVal) {
+          model[disableAttr] = disableBool;
         }
-        return person;
+        return model;
+      });
+    }
+
+    function resetScope(opts) {
+      opts = opts || {};
+      var key = opts.key || 'people';
+      scope[key] = angular.copy(scope['_' + key]);
+    }
+
+    describe('without disabling expression', function () {
+      beforeEach(function() {
+        disablePerson();
+        this.el = createUiSelect();
       });
 
-      this.el = createUiSelect();
+      it('should not allow disabled options to be selected', function() {
+        clickItem(this.el, 'Wladimir');
+
+        expect(getMatchLabel(this.el)).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')).toBeFalsy();
+      });
     });
 
-    afterEach(function() {
-      scope.people = angular.copy(scope._people);
+    describe('disable on truthy property', function () {
+      beforeEach(function() {
+        disablePerson({
+          disableAttr : 'inactive',
+          disableBool : true,
+        });
+        this.el = createUiSelect({
+          disabled: 'person.inactive'
+        });
+      });
+
+      it('should allow the user to define the selected option', function () {
+        expect($(this.el).find('.ui-select-choices').attr('ui-disable-choice')).toBe('person.inactive');
+      });
+
+      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();
+      });
     });
 
-    it('should not allow disabled options to be selected', function() {
-      clickItem(this.el, 'Wladimir');
+    describe('disable on inverse property check', function () {
+      beforeEach(function() {
+        disablePerson({
+          disableAttr : 'active',
+          disableBool : false,
+        });
+        this.el = createUiSelect({
+          disabled: '!person.active'
+        });
+      });
+
+      it('should allow the user to define the selected option', function () {
+        expect($(this.el).find('.ui-select-choices').attr('ui-disable-choice')).toBe('!person.active');
+      });
+
+      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(getMatchLabel(this.el)).not.toEqual('Wladimir');
+        expect(container.hasClass('disabled')).toBeTruthy();
+      });
     });
 
-    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');
+    describe('disable on expression', function () {
+      beforeEach(function() {
+        disablePerson({
+          disableAttr : 'status',
+          disableBool : 'inactive'
+        });
+        this.el = createUiSelect({
+          disabled: "person.status == 'inactive'"
+        });
+      });
+
+      it('should allow the user to define the selected option', function () {
+        expect($(this.el).find('.ui-select-choices').attr('ui-disable-choice')).toBe("person.status == 'inactive'");
+      });
+
+      it('should not allow disabled options to be selected', function() {
+        clickItem(this.el, 'Wladimir');
+
+        expect(getMatchLabel(this.el)).not.toEqual('Wladimir');
+      });
 
-      expect(container.hasClass('disabled')).toBeTruthy();
+      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();
+      });
+    });
+
+    afterEach(function() {
+      resetScope();
     });
   });