角度選擇中的選項顏色

Question

如何為 angular 下拉菜單中的每個選項指定字體顏色？

我試圖通過將ng-style="{color:{{selectedCar.dropdown_color}};}"到 select 標簽來做到這一點，但它不起作用。

<!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>

Answer 1

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>

角度選擇中的選項顏色

問題描述

1 個解決方案

解決方案1
0 2020-03-13 07:18:30

角度選擇中的選項顏色

問題描述

1 個解決方案

解決方案1 0 2020-03-13 07:18:30

解決方案1
0 2020-03-13 07:18:30