CODEWITHSUNDEEP
htmlcssangularjsdrop-down-menuui-select
noviewpoint
noviewpoint

Reputation: 584

ui-select: How to change background color of selected element?

I am using ui-select in combination with angularjs v1.5. Here is my html code:

<ui-select multiple sortable="true" ng-model="RealtimeCtrl.selectedPersons" theme="bootstrap">

<ui-select-match placeholder="Select or search a person in the list...">{{$item.username}}</ui-select-match>

<ui-select-choices repeat="item in RealtimeCtrl.people | filter: $select.search">
  <div ng-bind-html="item.username | highlight: $select.search"></div>
  <!--<small ng-bind-html="item.email | highlight: $select.search"></small>-->
</ui-select-choices>

</ui-select>

In angular I have a basic controller that fills the people variable with data. My question is pretty simple but I didn't find anything similar asked before - how to give ui-select selected element a specific css background color?

I would store this randomly generated color in angular controller.

Any ideas? Any help would be much appreciated.

Upvotes: 0

Views: 3832

Answers (2)

Nick2618
Nick2618

Reputation: 1

Its very late at this point but solved this a little cleaner I think.

Main point is add some css to override and clear the default background and then drop an ng-style to apply colors to ui select

ng-style="{ 'background-color': someVariable === true ? '#color1' : '#color2'}"

  <style>
        .select2-choice,  .select2-arrow { 
            background-image: none !important;
            background-color: transparent !important;
        }

       .select2-choice, .select2-arrow {
            background-image: none !important;
        }
        .select2-arrow {
            border-left: 0px !important;
        }   
       .select2-drop-active {
            border-top: none;
        }

    </style>

<ui-select  ng-style="{ 'background-color': someVariable === true ? '#color1' : '#color2'}" multiple sortable="true" ng-model="RealtimeCtrl.selectedPersons" theme="bootstrap">

<ui-select-match placeholder="Select or search a person in the list...">{{$item.username}}</ui-select-match>

<ui-select-choices repeat="item in RealtimeCtrl.people | filter: $select.search">
  <div ng-bind-html="item.username | highlight: $select.search"></div>
  <!--<small ng-bind-html="item.email | highlight: $select.search"></small>-->
</ui-select-choices>

</ui-select>

Upvotes: 0

noviewpoint
noviewpoint

Reputation: 584

I solved this problem the ugly way, but it works. First I added a function call to ui-select element on select event (occurs when an item was selected):

<ui-select on-select="MyCtrl.onSelected($item);" on-remove="MyCtrl.onRemove($item);" multiple sortable="true" ng-model="MyCtrl.selectedPersons" theme="bootstrap">

<ui-select-match placeholder="Select or search a person in the list..."><span id="{{$item.$$hashKey}}">{{$item.username}}</span></ui-select-match>

<ui-select-choices repeat="item in MyCtrl.people | filter: $select.search">
  <div ng-bind-html="item.username | highlight: $select.search"></div>
  <!--<small ng-bind-html="item.email | highlight: $select.search"></small>-->
</ui-select-choices>

</ui-select>

I added a html id property on the span element with the value of {{$item.$$hashKey}}. The trick is I needed to change the background color of the parent of the selected span so I needed an id so that I could reference the proper parent. If there is a more elegant way to do this, please let me know.

Lastly, onSelected method is implemented in controller:

vm.onSelected = function(x) {
    document.getElementById(x.$$hashKey).parentElement.parentElement.style.backgroundColor = x.color;
};

This method changes the background color of the selected element parent. The color for each object is already stored in a object property.

When the user removes a certain element, a for loop runs over all selected persons and ensures that color of each DOM element stays the same as it was before the user removed a certain element.

vm.onRemove = function(x) {
    for (var i = 0; i < vm.selectedPersons.length; i++) {
        var x = vm.selectedPersons[i];
        document.getElementById(x.$$hashKey).parentElement.parentElement.style.backgroundColor = x.color;
    }
};

Upvotes: 2

Related Questions