显示选定的选项颜色 - AngularJS答案

【问题标题】：Display Selected Option Color - AngularJS显示选定的选项颜色 - AngularJS
【发布时间】：2015-11-02 17:52:58
【问题描述】：

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

在这个例子中，我使用了 Font-Awesome 库中的 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>

【问题讨论】：

角度数据绑定在这里会有所帮助。
角度数据（ng-model）意味着我需要使用某种值来为交叉引用着色，并且我想使用 switch 语句来设置选择的 ng 样式。我希望有一种方法可以获取选项的 CSS 颜色，然后将其传递给 ng 样式，但到目前为止，我一直无法弄清楚如何从 ng-change 获取选项对象。跨度>
ng-class 在这里可能有用。

标签： css angularjs font-awesome

【解决方案1】：

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

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

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

【讨论】：

这个解决方案意味着我需要创建一个将值链接到颜色的数组。我希望有一种方法可以读取所选选项的颜色值，然后通过 ng-style 或 ng-class 应用它。这里的想法是填充选项值的数据并不总是简单的 1,2,3... 但标志序列将保持静态。任何想法如何到达已设置 css 颜色的选定选项对象？
通常情况下，选项值来自后端，简单或复杂。也就是说，它们通常由数据驱动。如果是这样的话，那么这个方法就很简单了。