Настройка цвета для выбранного параметра в select angularjs

#html #css #angularjs

#HTML #css #angularjs

Вопрос:

У меня есть следующий фрагмент кода

 <select class="mx-1" style="padding: 5px 0 5px 5px;"
     ng-model="vm.fruitName"
     ng-style="vm.addStyle"
     ng-change="vm.onFruitChange()"
     ng-click="vm.onFruitSelectClicked()"
     ng-options="fruit for fruit in vm.fruitNames">
     <option value="">---Select Fruit---</option>
</select>
  

и мой код контроллера

 function onFruitChange() {
        vm.addStyle = {'color':vm.fruitColors[vm.fruitName]};
    }
    function onFruitSelectClicked() {
        vm.addStyle={};
    }
  

Теперь проблема заключается в том, что когда пользователь нажимает на select и не выбирает какой-либо элемент, предыдущий элемент остается выбранным, и я потерял весь стиль. Есть ли какой-нибудь способ справиться с этим?

Комментарии:

1. Почему вам нужно сбросить стиль при нажатии? Я имею в виду, почему это в первую очередь?

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

3. Где использовать addStyle ?

4. Спасибо, что указали. Я исправил это сейчас.

5. and i lost all the styling вы теряете только color , верно? Может быть, мне будет легче понять, если вы создадите рабочий пример (используя сниппет, jsbin и т. Д.)