Question

我有一个下拉列表，我需要在下拉列表中将第一个值设为bold.Dropdown代码如下。

<div class="col-xs-3">
    <select-box id="ad-version-select" options="curItem.stats.version" model="state.version" initial="All" change="watchvalue()" ng-disabled="state.partialDisable"></select-box>
</div>

<select class="form-control" ng-model="model" ng-change="change()">

    <option ng-if="initial.length" ng-bind="initial" value=""></option>
    <option ng-repeat="option in options" value="{{getValue()}}" ng-selected="model==getValue()" ng-bind="getTitleVariable()"></option>
</select>

我试过

<style>
div.col-xs-3>div:first-child {
    font-weight: bold;
}
</style>

但没有奏效。我不知道如何只使第一个值变粗。我不能使用jquery。有人可以帮我这个吗？

Answer 1

您的css选择器需要进行更改。您应该选择该选项的第一个子项以使其变为粗体。

option:first-child
{
  font-weight: bold;  
}

以下是示例Fiddle

希望这有帮助。

- 帮助：）

Answer 2

您可以将ng-options与ng-class一起使用：

<select ng-model="Blah">
  <option ng-repeat="person in persons" ng-class="{red: person.id == 1}" ng-selected="{Blah == person.Name}">{{person.Name}}</option>  
</select>

app.controller('AppController',
[
  '$scope',
  function($scope) {
    $scope.persons = [
      {id: 1, Name:'John',Eligible:true},
      {id: 2,Name:'Mark',Eligible:true},
      {id: 3,Name:'Sam',Eligible:false},
      {id: 4, Name:'Edward',Eligible:false},
      {id: 5, Name:'Michael',Eligible:true}
    ];

    $scope.Blah = 'Sam';

  }
]);

以下是Plunker

Answer 3

@ Help的解决方案应该有效。但并非所有浏览器都支持<select><option>中的样式。也许你需要自己构建组件，如下所示：

<div class="select">
  <div class="selected" ng-bind="current.title"></div>
  <div class="options">
    <div class="option" ng-repeat="option in options" value="{{option.value}}" ng-bind="option.title" ng-click="current=option"></div>
  </div>
</div>

.option:first-child {font-weight: bold;}

您需要添加更多脚本和样式才能使其像自然<select>一样工作。

在角度js中以下拉列表粗体显示第一个值

3 个答案: