在 Angular 中，如何在选择时将 <option> 文本设为粗体？

Question

例如：

我的下拉菜单有一些选项，例如：

印度
美国
英国

默认情况下，最上面的选项是 "Choose your country"。我的问题是，在 selection- 如果我选择印度。 Select 应该以粗体显示 "India" ，如果我返回 select "Choose your country" 。 Select 应该将 "Choose your country" 显示为文本（不是粗体）有人有什么建议吗？

Answer 1

您可以使用 ng-class 执行此操作。

<div ng-controller="MyCtrl">
 <select ng-model="selectedVal" ng-class="{'bold':selectedVal!='Choose'}">
    <option value="Choose">Choose</option> 
    <option value="Grandvalira">Grandvalira</option> 
    <option value="Vallnord">--Vallnord</option> 

 </select>
</div>

Working Demo

Answer 2

下面我输入了 javascript 和 angularjs 来更改默认值的样式和 select 在 select 框中编辑的值

$("#choice").change(function () {
    if($(this).val() == "0") $(this).addClass("empty");
    else $(this).removeClass("empty")
});

$("#choice").change();

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
   $scope.selected_account_type = function () {
  var myEl = angular.element( document.querySelector( '#choice1' ) );
  if($scope.selectedservice == "0" ){
     myEl.addClass('empty');
  }
  else{
    myEl.removeClass('empty');
  }
};
});

#choice option { color: black; }
.empty { color: gray; font-weight: bold; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<select id="choice">
    <option value="0" selected="selected">Choose...</option>
    <option value="1">Something</option>
    <option value="2">Something else</option>
    <option value="3">Another choice</option>
</select>

<select ng-app="myApp" id="choice1" ng-model="selectedservice" ng-change="selected_account_type(selectedservice)" ng-controller="myCtrl">
    <option value="0" selected="selected">Choose...</option>
    <option value="1">Something</option>
    <option value="2">Something else</option>
    <option value="3">Another choice</option>
</select>

在 Angular 中，如何在选择时将 <option> 文本设为粗体？

In Angular, how do you make the <option> text bold on selection?

html

css

html-select

angularjs

dropdown