ui-select: Как изменить цвет фона выбранного элемента?

Question

Я использую ui-select в сочетании с angularjs v1.5. Вот мой html-код:

<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> 

Угловой У меня есть базовый контроллер, который заполняет переменную people данными. Мой вопрос довольно прост, но я не нашел ничего подобного раньше - как дать ui-select выбранному элементу конкретный цвет фона css?

Я бы сохранил этот случайный цвет в угловом контроллере.

Любые идеи? Любая помощь приветствуется.

Answer 1

Я решил эту проблему уродливым способом, но он работает. Сначала я добавил вызов функции Ui-выбор элемента на выберите событие (происходит тогда, когда был выбран элемент):

<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> 

Я добавил свойство HTML ИД размаха элемент со значением {{$ п $. $ hashKey}}. Фокус в том, что мне нужно изменить цвет фона родителя выбранного диапазона, поэтому мне нужен идентификатор, чтобы я мог ссылаться на соответствующего родителя. Если есть более элегантный способ сделать это, пожалуйста, дайте мне знать.

Наконец, onSelected способ реализован в контроллере:

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

Этот метод изменяет цвет фона выбранного элемента родителя. Цвет для каждого объекта уже сохранен в свойстве объекта.

Когда пользователь удаляет определенный элемент, цикл цикла обрабатывается всеми выбранными лицами и гарантирует, что цвет каждого элемента DOM остается таким же, как и до того, как пользователь удалит определенный элемент.

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; 
    } 
};