如何使用模型值动态更改选择菜单焦点颜色- angularjs

Question

我想用模型值改变选择菜单的焦点颜色。

当我尝试选择“产品经理”时。在聚焦数值时，背景颜色将为蓝色。我想根据$scope.model.webPageSkinColor的值动态地改变背景颜色。

$scope.model.webPageSkinColor = "#7A0834";
$scope.model.webPageSkinColor = "#fff";
$scope.assignedRoles = ["Product Manager", "Student", "Parent", "Engineer"];

    <div class="col-sm-4">
<label class="control-label l_font field-name" for="acode">Select Role *</label>
                             <select class="form-control floating-select" ng-model="model.selectRole" name="selectrole" ng-change="getallassignedRoledetails(model.selectRole)" ng-options="item for item in assignedRoles" required style="width: 100%;" ng-style ="{'background': model.webPageSkin, 'color': model.webPageSkin1}">
                            <option value class selected disabled ng-if="!model.selectRole"></option>
                 </select>


                        </div>

Answer 1

您可以像这样使用三元运算符：

<select class="form-control floating-select" ng-model="model.selectRole" name="selectrole" ng-change="getallassignedRoledetails(model.selectRole)" ng-options="item for item in assignedRoles" required style="width: 100%;" ng-style ="model.selectedRole == 'Product Manager' ? '{"background": model.webPageSkin, "color": model.webPageSkin1}' : '{}'">