显示选定的选项颜色 - AngularJS
Display Selected Option Color - AngularJS
我想知道是否可以在用户选择一个选项后显示所选选项的颜色?
在这个例子中,我使用了 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"></option>
<option class="fa fa-flag" style="color:violet;" value="2"></option>
<option class="fa fa-flag" style="color:yellow;" value="3"></option>
<option class="fa fa-flag" style="color:red;" value="4"></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 </option>
<option class="fa fa-flag violet" value="2">Two </option>
<option class="fa fa-flag yellow" value="3">Three </option>
<option class="fa fa-flag red" value="4">Four </option>
</select>
我在选项中添加了一、二.. 只是为了查看选择后颜色的变化。
这是plnkr link
我想知道是否可以在用户选择一个选项后显示所选选项的颜色?
在这个例子中,我使用了 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"></option>
<option class="fa fa-flag" style="color:violet;" value="2"></option>
<option class="fa fa-flag" style="color:yellow;" value="3"></option>
<option class="fa fa-flag" style="color:red;" value="4"></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 </option>
<option class="fa fa-flag violet" value="2">Two </option>
<option class="fa fa-flag yellow" value="3">Three </option>
<option class="fa fa-flag red" value="4">Four </option>
</select>
我在选项中添加了一、二.. 只是为了查看选择后颜色的变化。
这是plnkr link