时间戳

首页 > 解决方案 > Angular 选择中的选项颜色

angularjs - Angular 选择中的选项颜色

问题描述

如何为 angular 下拉菜单中的每个选项分配字体颜色？

我试图通过添加 ng-style="{color:{{selectedCar.dropdown_color}};}"到选择标签来做到这一点，但它不起作用。

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.cars = {
        car01 : {brand : "Ford", model : "Mustang", dropdown_color : "red"},
        car02 : {brand : "Fiat", model : "500", dropdown_color : "green"},
        car03 : {brand : "Volvo", model : "XC90", dropdown_color : "blue"}
    }
});
</script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">

<p>Select a car:</p>

<select ng-model="selectedCar" ng-options="y.brand for (x, y) in cars"
        ng-style="{color:{{selectedCar.dropdown_color}};">
</select>

<h1>You selected: {{selectedCar.brand}}</h1>
<h2>Model: {{selectedCar.model}}</h2>

</div>

</body>
</html>

标签： angularjscolorsng-optionsangularjs-select

解决方案

该ngStyle指令采用 AngularJS 表达式。

所以你必须写ng-style="{color:selectedCar.dropdown_color}"。但它会将所有选项的文本颜色更改为所选汽车之一。

如果您想在属性中定义颜色中的每个选项，dropdown_color则必须ngRepeat改用并更改您的选择

<select ng-model="selectedOption" 
        ng-options="y.brand for (x, y) in cars" 
        ng-style="{color : selectedCar.dropdown_color}">
</select>

成为

<select ng-model="selectedCar" 
        ng-change="selectedCar = cars[selectedOption]" 
        ng-style="{color : selectedCar.dropdown_color}">
   <option ng-repeat="(key, value) in cars" 
           ng-style="{color: value.dropdown_color}" 
           ng-value="key" 
           ng-bind="value.brand"></option>
</select>

推荐阅读