Proposal of a way to change the class and style of tags, selected choice and available choices

src/bootstrap/choices.tpl.html

@@ -5,7 +5,7 @@
     <div ng-show="$select.isGrouped" class="ui-select-choices-group-label dropdown-header" ng-bind="$group.name"></div>
     <div ng-attr-id="ui-select-choices-row-{{ $select.generatedId }}-{{$index}}" class="ui-select-choices-row"
     ng-class="{active: $select.isActive(this), disabled: $select.isDisabled(this)}" role="option">
-      <span class="ui-select-choices-row-inner"></span>
+      <span class="ui-select-choices-row-inner" ng-class="$select.choiceClass(this)" ng-style="$select.choiceStyle(this)"></span>
     </div>
   </li>
 </ul>

src/bootstrap/match-multiple.tpl.html

@@ -1,12 +1,13 @@
 <span class="ui-select-match">
   <span ng-repeat="$item in $select.selected track by $index">
     <span
-      class="ui-select-match-item btn btn-default btn-xs"
+      class="ui-select-match-item btn"
       tabindex="-1"
       type="button"
       ng-disabled="$select.disabled"
       ng-click="$selectMultiple.activeMatchIndex = $index;"
-      ng-class="{'btn-primary':$selectMultiple.activeMatchIndex === $index, 'select-locked':$select.isLocked(this, $index)}"
+      ng-class="$select.matchClass(this, $index, {'btn-primary':$selectMultiple.activeMatchIndex === $index, 'select-locked':$select.isLocked(this, $index), 'btn-default btn-xs': true})"
+      ng-style="$select.matchStyle(this, $index)"
       ui-select-sort="$select.selected">
         <span class="close ui-select-match-close" ng-hide="$select.disabled" ng-click="$selectMultiple.removeChoice($index)">&nbsp;&times;</span>
         <span uis-transclude-append></span>

src/bootstrap/match.tpl.html

@@ -1,6 +1,8 @@
 <div class="ui-select-match" ng-hide="$select.open && $select.searchEnabled" ng-disabled="$select.disabled" ng-class="{'btn-default-focus':$select.focus}">
   <span tabindex="-1"
-      class="btn btn-default form-control ui-select-toggle"
+      class="btn form-control ui-select-toggle"
+      ng-class="$select.matchClass(this, null, 'btn-default')"
+      ng-style="$select.matchStyle(this)"
       aria-label="{{ $select.baseTitle }} activate"
       ng-disabled="$select.disabled" 
       ng-click="$select.activate()"

src/select2/choices.tpl.html

@@ -3,7 +3,9 @@
     <div ng-show="$select.choiceGrouped($group)" class="ui-select-choices-group-label select2-result-label" ng-bind="$group.name"></div>
     <ul
       id="ui-select-choices-{{ $select.generatedId }}" ng-class="{'select2-result-sub': $select.choiceGrouped($group), 'select2-result-single': !$select.choiceGrouped($group) }">
-      <li role="option" ng-attr-id="ui-select-choices-row-{{ $select.generatedId }}-{{$index}}" class="ui-select-choices-row" ng-class="{'select2-highlighted': $select.isActive(this), 'select2-disabled': $select.isDisabled(this)}">
+      <li role="option" ng-attr-id="ui-select-choices-row-{{ $select.generatedId }}-{{$index}}" class="ui-select-choices-row"
+          ng-class="$select.choiceClass(this, {'select2-highlighted': $select.isActive(this), 'select2-disabled': $select.isDisabled(this)})"
+          ng-style="$select.choiceStyle(this)">
         <div class="select2-result-label ui-select-choices-row-inner"></div>
       </li>
     </ul>

src/select2/match-multiple.tpl.html

@@ -5,8 +5,8 @@
 -->
 <span class="ui-select-match">
   <li class="ui-select-match-item select2-search-choice" ng-repeat="$item in $select.selected track by $index"
-      ng-class="{'select2-search-choice-focus':$selectMultiple.activeMatchIndex === $index, 'select2-locked':$select.isLocked(this, $index)}"
-      ui-select-sort="$select.selected">
+      ng-class="$select.matchClass(this, $index,  {'select2-search-choice-focus':$selectMultiple.activeMatchIndex === $index, 'select2-locked':$select.isLocked(this, $index)})"
+      ng-style="$select.matchStyle(this, $index)" ui-select-sort="$select.selected">
       <span uis-transclude-append></span>
       <a href="javascript:;" class="ui-select-match-close select2-search-choice-close" ng-click="$selectMultiple.removeChoice($index)" tabindex="-1"></a>
   </li>

src/select2/match.tpl.html

@@ -4,7 +4,8 @@
   do not work: [class^="select2-choice"]
 -->
 <a class="select2-choice ui-select-match"
-   ng-class="{'select2-default': $select.isEmpty()}"
+   ng-class="$select.matchClass(this, null, {'select2-default': $select.isEmpty()})"
+   ng-style="$select.matchStyle(this)"
    ng-click="$select.toggle($event)" aria-label="{{ $select.baseTitle }} select">
   <span ng-show="$select.isEmpty()" class="select2-chosen">{{$select.placeholder}}</span>
   <span ng-hide="$select.isEmpty()" class="select2-chosen" ng-transclude></span>

src/selectize/choices.tpl.html

@@ -3,7 +3,8 @@
   <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" ng-bind="$group.name"></div>
-      <div role="option" class="ui-select-choices-row" ng-class="{active: $select.isActive(this), disabled: $select.isDisabled(this)}">
+      <div role="option" class="ui-select-choices-row" ng-class="$select.choiceClass(this, {active: $select.isActive(this), disabled: $select.isDisabled(this)})"
+          ng-style="$select.choiceStyle(this)">
         <div class="option ui-select-choices-row-inner" data-selectable></div>
       </div>
     </div>

src/selectize/match-multiple.tpl.html

@@ -1,7 +1,8 @@
 <div class="ui-select-match" data-value
      ng-repeat="$item in $select.selected track by $index"
      ng-click="$selectMultiple.activeMatchIndex = $index;"
-     ng-class="{'active':$selectMultiple.activeMatchIndex === $index}"
+     ng-class="$select.matchClass(this, $index, {'active':$selectMultiple.activeMatchIndex === $index})"
+     ng-style="$select.matchStyle(this, $index)"
      ui-select-sort="$select.selected">
   <span class="ui-select-match-item"
         ng-class="{'select-locked':$select.isLocked(this, $index)}">

src/uiSelectChoicesDirective.js

@@ -59,6 +59,8 @@ uis.directive('uiSelectChoices',
         $select.onHighlightCallback = attrs.onHighlight;
         $select.minimumInputLength = parseInt(attrs.minimumInputLength) || 0;
         $select.dropdownPosition = attrs.position ? attrs.position.toLowerCase() : uiSelectConfig.dropdownPosition;
+        $select.choiceClassExpression = attrs.uiChoiceClass;
+        $select.choiceStyleExpression = attrs.uiChoiceStyle;
 
         scope.$watch('$select.search', function(newValue) {
           if(newValue && !$select.open && $select.multiple) $select.activate(false, true);

src/uiSelectController.js

@@ -42,6 +42,10 @@ uis.controller('uiSelectCtrl',
   ctrl.tagging = {isActivated: false, fct: undefined};
   ctrl.taggingTokens = {isActivated: false, tokens: undefined};
   ctrl.lockChoiceExpression = undefined; // Initialized inside uiSelectMatch directive link function
+  ctrl.matchClassExpression = undefined; // Initialized inside uiSelectMatch directive link function
+  ctrl.matchStyleExpression = undefined; // Initialized inside uiSelectMatch directive link function
+  ctrl.choiceClassExpression = undefined; // Initialized inside uiSelectChoices directive link function
+  ctrl.choiceStyleExpression = undefined; // Initialized inside uiSelectChoices directive link function
   ctrl.clickTriggeredSelect = false;
   ctrl.$filter = $filter;
   ctrl.$element = $element;
@@ -519,6 +523,107 @@ uis.controller('uiSelectCtrl',
     };
   }
 
+  // Inspired from anguar.js arrayClasses
+  // Turns a ng-class style argument into a array of string,
+  // and fill noClass with the classes given in ``{className: false}``
+  function arrayClasses(classVal, noClass) {
+    var classes = [];
+    if (Array.isArray(classVal)) {
+      classVal.forEach(function(v) {
+        classes = classes.concat(arrayClasses(v, noClass));
+      });
+    } else if (typeof classVal === 'string') {
+      return classVal.split(' ');
+    } else if (typeof classVal === 'object') {
+      for(var k in classVal) {
+        if (classVal[k]) {
+          classes = classes.concat(k.split(' '));
+        } else {
+          /*jshint loopfunc: true */
+          k.split(' ').forEach(function(c){
+            noClass[c] = true;
+          });
+        }
+      }
+    }
+    return classes;
+  }
+
+  // Gives the ng-class argument for <ui-select-match>
+  ctrl.matchClass = function(itemScope, itemIndex, deflt) {
+    deflt = deflt || {};
+    if(!ctrl.matchClassExpression) return deflt;
+    // create a context with a $match object (if itemIndex is given)
+    var context = {};
+    if(typeof itemIndex === 'number'){
+      context.$match = {
+        active: itemScope.$selectMultiple.activeMatchIndex == itemIndex,
+        locked: ctrl.isLocked(itemScope, itemIndex),
+      };
+    }
+    // evaluate ui-match-class attribute
+    var classes = itemScope.$eval(ctrl.matchClassExpression, context) || {};
+    // all this code is used to disable default classes when recieved in ``{className: false}``
+    // if it is overkill, a simple ``return [classes, deflt];`` makes the job
+    if(!deflt) return classes;
+    var noClass = {};
+    classes = arrayClasses(classes, noClass);
+    arrayClasses(deflt, {}).forEach(function(c){
+      if(!noClass[c]) classes.push(c);
+    });
+    return classes;
+  };
+
+  // Gives the ng-style argument for <ui-select-match>
+  ctrl.matchStyle = function(itemScope, itemIndex) {
+    if(!ctrl.matchStyleExpression) return {};
+    // create a context with a $match object (if itemIndex is given)
+    var context = {};
+    if(typeof itemIndex === 'number'){
+      context.$match = {
+        active: itemScope.$selectMultiple.activeMatchIndex == itemIndex,
+        locked: ctrl.isLocked(itemScope, itemIndex),
+      };
+    }
+    // evaluate ui-match-styke attribute
+    return itemScope.$eval(ctrl.matchStyleExpression, context) || {};
+  };
+
+  // Gives the ng-class argument for <ui-select-choice>
+  ctrl.choiceClass = function(itemScope, deflt) {
+    deflt = deflt || {};
+    if(!ctrl.choiceClassExpression) return deflt;
+    // create a context with a $choice object
+    var context = {};
+    context.$choice = {
+      active: ctrl.isActive(itemScope),
+      disabled: ctrl.isDisabled(itemScope),
+    };
+    // evaluate ui-choice-class attribute
+    var classes = itemScope.$eval(ctrl.choiceClassExpression, context) || {};
+    // all this code is used to disable default classes when recieved in ``{className: false}``
+    // if it is overkill, a simple ``return [classes, deflt];`` makes the job
+    if(!deflt) return classes;
+    var noClass = {};
+    classes = arrayClasses(classes, noClass);
+    arrayClasses(deflt, {}).forEach(function(c){
+      if(!noClass[c]) classes.push(c);
+    });
+    return classes;
+  };
+
+  // Gives the ng-style argument for <ui-select-choice>
+  ctrl.choiceStyle = function(itemScope) {
+    if(!ctrl.choiceStyleExpression) return {};
+    // create a context with a $choice object
+    var context = {};
+    context.$choice = {
+      active: ctrl.isActive(itemScope),
+      disabled: ctrl.isDisabled(itemScope),
+    };
+    // evaluate ui-choice-style attribute
+    return itemScope.$eval(ctrl.choiceStyleExpression, context) || {};
+  };
 
   var sizeWatch = null;
   var updaterScheduled = false;

src/uiSelectMatchDirective.js

@@ -17,6 +17,8 @@ uis.directive('uiSelectMatch', ['uiSelectConfig', function(uiSelectConfig) {
     },
     link: function(scope, element, attrs, $select) {
       $select.lockChoiceExpression = attrs.uiLockChoice;
+      $select.matchClassExpression = attrs.uiMatchClass;
+      $select.matchStyleExpression = attrs.uiMatchStyle;
       attrs.$observe('placeholder', function(placeholder) {
         $select.placeholder = placeholder !== undefined ? placeholder : uiSelectConfig.placeholder;
       });