如何有一个默认选项在Angular.js选择框

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

我有这个代码。

<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>

当前回答

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

<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>

2015-06-11 13:35:49

其他回答

根据您拥有的选项的数量，您可以将值放在一个数组中，并像这样自动填充选项

<select ng-model="somethingHere.values" ng-options="values for values in [5,4,3,2,1]">
   <option value="">Pick a Number</option>
</select>

2014-10-15 21:54:21

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

<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>

2015-06-11 13:35:49

我需要默认的“请选择”是不可选择的。我还需要能够有条件地设置默认选择选项。

我通过以下简单的方法做到了这一点: JS代码: //翻转这两个按钮来测试所选的默认值或默认的“Please Select”文本 //$scope.defaultOption = 0; $scope.defaultOption = {key: '3'， value: 'Option 3'};

$scope.options = [
   { key: '1', value: 'Option 1' },
   { key: '2', value: 'Option 2' },
   { key: '3', value: 'Option 3' },
   { key: '4', value: 'Option 4' }
];

getOptions();

function getOptions(){
    if ($scope.defaultOption != 0)
    { $scope.options.selectedOption = $scope.defaultOption; }
}

HTML:

<select name="OptionSelect" id="OptionSelect" ng-model="options.selectedOption" ng-options="item.value for item in options track by item.key">
<option value="" disabled selected style="display: none;"> -- Please Select -- </option>
</select>
<h1>You selected: {{options.selectedOption.key}}</h1>

我希望这能帮助其他有类似需求的人。

“请选择”是通过Joffrey Outtier的回答完成的。

2016-11-08 15:55:26

我的解决方案是使用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问题的直接回答，但人们在谷歌上找到了这个。希望这能帮助到其他人。

2013-12-10 18:21:35

接受的答案使用ng-init，但是文档说如果可能的话避免ng-init。

ngInit唯一合适的用法是对特殊属性进行混叠 ngRepeat，如下图所示。除了这个案子，你应该使用控制器而不是ngInit来初始化作用域上的值。

你也可以使用ng-repeat来代替ng-options。使用ng-repeat，您可以使用ng-selected和ng-repeat的特殊属性。例如，$index， $odd， $even使其无需任何编码即可工作。

$first是ng-repeat的一个特殊属性。

  <select ng-model="foo">
    <option ng-selected="$first" ng-repeat="(id,value) in myOptions" value="{{id}}">
      {{value}}
    </option>
  </select>

----------------------编辑---------------- 虽然这是可行的，但我更喜欢@mik-t的答案，当您知道要选择什么值时，https://stackoverflow.com/a/29564802/454252，它使用track-by和ng-options，而不使用ng-init或ng-repeat。

这个答案只适用于当你必须选择第一项而不知道选择什么值时。例如，我正在使用这个自动完成，它需要一直选择第一个项目。

2015-04-09 20:26:13

如何有一个默认选项在Angular.js选择框

推荐文章

最新文章

标签