如何有一个默认选项在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>
533507 次浏览
小开

试试这个:

超文本标记语言

<select
ng-model="selectedOption"
ng-options="option.name for option in options">
</select>

Javascript

function Ctrl($scope) {
$scope.options = [
{
name: 'Something Cool',
value: 'something-cool-value'
},
{
name: 'Something Else',
value: 'something-else-value'
}
];


$scope.selectedOption = $scope.options[0];
}

恰好在这里。

如果你真的想设置将绑定到模型的值，那么将ng-options属性更改为

ng-options="option.value as option.name for option in options"

和Javascript

...
$scope.selectedOption = $scope.options[0].value;

另一个Plunker 在这里考虑到上面。

小开
最佳答案

你可以像这样简单地使用ng-init

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

如果你想要确保你的$scope.somethingHere值在你的视图初始化时不会被覆盖，你需要像这样在ng-init中合并(somethingHere = somethingHere || options[0].value)值:

<select ng-model="somethingHere"
ng-init="somethingHere = somethingHere || options[0].value"
ng-options="option.value as option.name for option in options">
</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问题的直接回答，但人们在谷歌上找到了这个。希望这能帮助到其他人。

小开

我认为，在包含'track by'之后，你可以在ng-options中使用它来得到你想要的东西，就像下面这样

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

这种方法更好因为当你想用对象列表替换字符串列表时你只需要把这个改成

 <select ng-model="somethingHere" ng-options="object.name for option in options track by object.id" ></select>

这里当然是一个带有属性名和id的对象。请注意，'as'不能用这种方式来表示ng-options，因为它只会设置值，当您使用track by时，您将无法更改它

小开

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

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

我认为最简单的方法是

 ng-selected="$first"
小开

在我的情况下，因为默认情况下不同的情况下的形式。 我在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是正确的。

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

小开

接受的答案使用ng-init，但文档表示尽可能避免ng-init。

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

你也可以使用ng-repeat代替ng-options作为选项。使用ng-repeat，你可以使用带有ng-repeat特殊属性的ng-selected。例如，$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>
< p >---------------------- 编辑 ----------------< br > 虽然这是有效的，但我更喜欢@mik-t的答案，当你知道要选择什么值时，https://stackoverflow.com/a/29564802/454252，它使用track-by和ng-options，而不使用ng-init或ng-repeat

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

小开

只有一个Srivathsa Harish Venkataramana的回答提到了track by，这确实是一个解决方案!

下面是一个例子和Plunker(下面的链接)，如何在选择 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列表中任何city的任何id的值相同，它将在加载时被自动选择。

下面是Plunker的回答: http://plnkr.co/edit/1EVs7R20pCffewrG0EmI?p=preview < / p >

参见源文档了解更多详细信息: https://code.angularjs.org/1.3.15/docs/api/ng/directive/select < / em > < / p >

小开

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

<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>
小开
如果你使用ng-options来渲染你的下拉列表，那么默认选择与ng-modal值相同的option。 考虑下面的例子:

<select ng-options="list.key as list.name for list in lists track by list.id" ng-model="selectedItem">

因此，具有相同值list.key和selectedItem的选项默认被选中。

小开
我将在控制器中设置模型。然后选择将默认为该值。例: html: < / p > 
<select ng-options="..." ng-model="selectedItem">

Angular控制器(使用资源):

myResource.items(function(items){
$scope.items=items;
if(items.length>0){
$scope.selectedItem= items[0];
//if you want the first. Could be from config whatever
}
});
小开

使用select和ngOptions并设置默认值:

有关更多ngOptions使用示例，请参阅ngOptions文档。

. 
angular.module('defaultValueSelect', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.data = {
availableOptions: [
{id: '1', name: 'Option A'},
{id: '2', name: 'Option B'},
{id: '3', name: 'Option C'}
],
selectedOption: {id: '2', name: 'Option B'} //This sets the default value of the select in the ui
};
}]);
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.0/angular.min.js"></script>
<body ng-app="defaultValueSelect">
<div ng-controller="ExampleController">
<form name="myForm">
<label for="mySelect">Make a choice:</label>
<select name="mySelect" id="mySelect"
ng-options="option.name for option in data.availableOptions track by option.id"
ng-model="data.selectedOption"></select>
</form>
<hr>
<tt>option = \{\{data.selectedOption}}</tt><br/>
</div>

<强> < a href = " http://plnkr.co/edit/zyFEUoLBDEont54PfrHp?p=preview " > plnkr.co < / > < / >强

关于HTML SELECT元素的angular数据绑定。

通过ngModel解析/格式化将select绑定到非字符串值:

. 
(function(angular) {
'use strict';
angular.module('nonStringSelect', [])
.run(function($rootScope) {
$rootScope.model = { id: 2 };
})
.directive('convertToNumber', function() {
return {
require: 'ngModel',
link: function(scope, element, attrs, ngModel) {
ngModel.$parsers.push(function(val) {
return parseInt(val, 10);
});
ngModel.$formatters.push(function(val) {
return '' + val;
});
}
};
});
})(window.angular);
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.1/angular.min.js"></script>
<body ng-app="nonStringSelect">
<select ng-model="model.id" convert-to-number>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
\{\{ model }}
</body>

<强> < a href = " http://plnkr.co/edit/HY1UXmZ4NpGIw5cefqNq?p=preview " > plnkr.co < / > < / >强

其他的例子:

. 
angular.module('defaultValueSelect', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.availableOptions = [
{ name: 'Apple', value: 'apple' },
{ name: 'Banana', value: 'banana' },
{ name: 'Kiwi', value: 'kiwi' }
];
$scope.data = {selectedOption : $scope.availableOptions[1].value};
}]);
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.0/angular.min.js"></script>
<body ng-app="defaultValueSelect">
<div ng-controller="ExampleController">
<form name="myForm">
<select ng-model="data.selectedOption" required ng-options="option.value as option.name for option in availableOptions"></select>
</form>
</div>
</body>

<强> < a href = " http://jsfiddle.net/shilovk/pmqsgv7n/ " > jsfiddle < / > < / >强

小开

在我的情况下，我需要插入一个初始值，只告诉用户选择一个选项，所以，我喜欢下面的代码:

<select ...
<option value="" ng-selected="selected">Select one option</option>
</select>

当我尝试一个空字符串(null)的值!=的选项时，该选项被angular取代，但是，当放置一个这样的选项(空值)时，选择出现这个选项。

抱歉我的英语不好，我希望我能在这方面有所帮助。

小开

作为Ben Lesh的回答是的响应，应该有这一行

ng-init="somethingHere = somethingHere || options[0]"

而不是

ng-init="somethingHere = somethingHere || options[0].value"

也就是说,

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

小开

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

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

这对我很管用。

<select ng-model="somethingHere" ng-init="somethingHere='Cool'">
<option value="Cool">Something Cool</option>
<option value="Else">Something Else</option>
</select>
小开

这对我很有用

ng-selected="true"
小开

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

我通过以下简单的方法实现了这一点: 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的答案在这里完成的。

小开
如果你有一些东西而不仅仅是init日期部分，你可以通过在控制器中声明它来使用ng-init()，并在HTML的顶部使用它。 这个函数将像控制器的构造函数一样工作，你可以在那里初始化你的变量 
angular.module('myApp', [])
.controller('myController', ['$scope', ($scope) => {
$scope.allOptions = [
{ name: 'Apple', value: 'apple' },
{ name: 'Banana', value: 'banana' }
];
$scope.myInit = () => {
$scope.userSelected = 'apple'
// Other initiations can goes here..
}
}]);




<body ng-app="myApp">
<div ng-controller="myController" ng-init="init()">
<select ng-model="userSelected" ng-options="option.value as option.name for option in allOptions"></select>
</div>
</body>
小开 
    <!--
Using following solution you can set initial
default value at controller as well as after change option selected value shown as default.
-->
<script type="text/javascript">
function myCtrl($scope)
{
//...
$scope.myModel=Initial Default Value; //set default value as required
//..
}
</script>
<select ng-model="myModel"
ng-init="myModel= myModel"
ng-options="option.value as option.name for option in options">
</select>
小开

在你的角控制器中试试这个…

$somethingHere = {name: 'Something Cool'};

你可以设置一个值，但你使用的是复杂类型，angular会在视图中搜索key/value来设置。

如果不行，试试这个: ng-options = "选项。值为option.name的选项跟踪option.name"


提交答案