我已经搜索了谷歌,在这个上面什么也找不到。

我有这个代码。

<select ng-model="somethingHere" 
        ng-options="option.value as option.name for option in options"
></select>

有这样的数据

options = [{
   name: 'Something Cool',
   value: 'something-cool-value'
}, {
   name: 'Something Else',
   value: 'something-else-value'
}];

输出是这样的。

<select ng-model="somethingHere"  
        ng-options="option.value as option.name for option in options" 
        class="ng-pristine ng-valid">

    <option value="?" selected="selected"></option>
    <option value="0">Something Cool</option>
    <option value="1">Something Else</option>
</select>

如何将数据中的第一个选项设置为默认值,从而得到这样的结果呢?

<select ng-model="somethingHere" ....>
    <option value="0" selected="selected">Something Cool</option>
    <option value="1">Something Else</option>
</select>

当前回答

我的解决方案是使用html硬编码我的默认选项。像这样:

HAML:

%select{'ng-model' => 'province', 'ng-options' => "province as province for province in summary.provinces", 'chosen' => "chosen-select", 'data-placeholder' => "BC & ON"}
  %option{:value => "", :selected => "selected"}
    BC &amp; ON

在HTML中:

<select ng-model="province" ng-options="province as province for province in summary.provinces" chosen="chosen-select" data-placeholder="BC & ON">
  <option value="" selected="selected">BC &amp; ON</option>
</select>

我想我的默认选项从我的api返回所有的值,这就是为什么我有一个空白值。也请原谅我的笨手笨脚。我知道这不是对OP问题的直接回答,但人们在谷歌上找到了这个。希望这能帮助到其他人。

其他回答

使用下面的代码填充从您的模型中选择的选项。

<select id="roomForListing" ng-model="selectedRoom.roomName" >

<option ng-repeat="room in roomList" title="{{room.roomName}}" ng-selected="{{room.roomName == selectedRoom.roomName}}" value="{{room.roomName}}">{{room.roomName}}</option>

</select>

在我的情况下,因为默认情况下不同的情况下,在形式。 我在选择标记中添加了一个自定义属性。

 <select setSeletected="{{data.value}}">
      <option value="value1"> value1....
      <option value="value2"> value2....
       ......

在指令中,我创建了一个检查值的脚本,当angular填充它时,将该值设置为选中的选项。

 .directive('setSelected', function(){
    restrict: 'A',
    link: (scope, element, attrs){
     function setSel=(){
     //test if the value is defined if not try again if so run the command
       if (typeof attrs.setSelected=='undefined'){             
         window.setTimeout( function(){setSel()},300) 
       }else{
         element.find('[value="'+attrs.setSelected+'"]').prop('selected',true);          
       }
     }
    }

  setSel()

})

刚刚从coffescript中翻译了这个,如果不是洞的东西,至少它的jist是正确的。

这不是最简单的方法,但当值变化时就能完成

如果你想确保你的$scope。当你的视图初始化时,somethingHere的值不会被覆盖,你会想要合并(somethingHere = somethingHere || options[0].value) ng-init中的值,如下所示:

<select ng-model="somethingHere" 
        ng-init="somethingHere = somethingHere || options[0].value"
        ng-options="option.value as option.name for option in options">
</select>

Srivathsa Harish Venkataramana只有一个回答提到了轨道,这确实是一个解决方案!

下面是一个关于如何在select ng-options中使用track by的例子(链接如下):

<select ng-model="selectedCity"
        ng-options="city as city.name for city in cities track by city.id">
  <option value="">-- Select City --</option>
</select>

如果selectedCity定义在angular作用域上,并且它的id属性与cities列表中任何城市的id值相同,它将在加载时自动选择。

下面是普伦克的解释: http://plnkr.co/edit/1EVs7R20pCffewrG0EmI?p=preview

有关更多细节,请参阅源代码文档: https://code.angularjs.org/1.3.15/docs/api/ng/directive/select

简单地使用ng-selected="true",如下所示:

<select ng-model="myModel">
        <option value="a" ng-selected="true">A</option>
        <option value="b">B</option>
</select>