显示选定的选项颜色 - AngularJS

Question

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

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

Answer 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

显示选定的选项颜色 - AngularJS

Display Selected Option Color - AngularJS

css

angularjs

font-awesome