Css 显示所选选项颜色-AngularJS

我想知道，在用户选择一个选项后，是否有可能显示所选选项的颜色

在本例中，我使用的是字体库中的Unicode标志字符

这段代码运行在AngularJS应用程序中，但这是否也可以用CSS轻松处理

<label for="followUp">FollowUp:</label>
<select  id="followUp" class="fa  fa-flag" style="font-family:'FontAwesome',Arial;">
     <option value=""></option>
     <option class="fa  fa-flag" style="color:blue;" value="1">&#xf024;</option>
     <option class="fa  fa-flag" style="color:violet;" value="2">&#xf024;</option>
    <option class="fa  fa-flag" style="color:yellow;" value="3">&#xf024;</option>
    <option class="fa  fa-flag" style="color:red;" value="4">&#xf024;</option>
</select>

---

以下是实现此目标的方法：

在控制器中，可以定义范围变量来存储不同颜色和值的映射

$scope.styleOptions = {"1":"blue","2":"violet","3":"yellow","4":"red"};

按如下方式更改您的HTML：

<label for="followUp">FollowUp:</label>
<select id="followUp" ng-model="selectedValue"
    ng-class="styleOptions[selectedValue]">
   <option value=""></option>
   <option class="fa  fa-flag blue" value="1">One &#xf024;</option>
   <option class="fa  fa-flag violet" value="2">Two &#xf024;</option>
   <option class="fa  fa-flag yellow" value="3">Three &#xf024;</option>
   <option class="fa  fa-flag red" value="4">Four &#xf024;</option>
</select>

我加了一、二。。在“选项”中，仅查看选择后更改的颜色

---

这是plnkr

角度数据绑定在这里很有用。角度数据ng模型意味着我需要使用某种值来对交叉引用进行着色，我假设使用一个switch语句来设置select的ng样式。我希望有一种方法可以获取选项的CSS颜色，然后将其传递给ng样式，但到目前为止，我还无法确定如何从ng-change.ng-class获取选项对象。在这里，ng-class可能很有用。此解决方案意味着我需要创建一个将值与颜色链接的数组。我希望有一种方法可以读取所选选项的颜色值，然后通过ng样式或ng类应用它。这里的想法是填充选项值的数据并不总是一个简单的1,2,3。。。但标志的顺序将保持不变。您知道如何到达已设置css颜色的选定选项对象吗？通常情况下，选项值来自后端，简单或复杂。也就是说，它们通常由数据驱动。如果是这样，那么这种方法很简单。