Question

例如：

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

印度
美
英国

默认情况下，最常用的选项是＆＃34;选择您所在的国家＆＃34;。我的问题是，在选择时 - 如果我选择印度。选择应该显示＆＃34;印度＆＃34;如果我回去选择＆＃34;选择你的国家＆＃34; 。选择应显示＆＃34;选择您所在的国家＆＃34;作为文本（不是粗体）有没有人有建议？

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来改变默认值的样式和选择框中的选定值

$("#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>文本变为粗体？

2 个答案: