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>

我在选项中添加了One，Two ..只是为了在选择后看到颜色被更改。

这是plnkr link

显示所选选项颜色 - AngularJS

1 个答案: