цвет опции в Angular выберите - PullRequest
Новая
       24

цвет опции в Angular выберите

0 голосов
/ 13 марта 2020

Как назначить цвет шрифта для каждого параметра в раскрывающемся меню в 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>

1 Ответ

0 голосов
/ 13 марта 2020

Директива 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>
...