如何在Angular.jsselect框中有一个默认选项
我search了谷歌，找不到任何东西。
我有这个代码。
<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>
你可以像这样简单地使用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
<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选项中使用它以获得您想要的内容，如下所示
<select ng-model="somethingHere" ng-options="option.name for option in options track by option.value" ></select>
这样做更好，因为当你想用对象列表replacestring列表，你只需要改变它
<select ng-model="somethingHere" ng-options="object.name for option in options track by object.id" ></select>
其中somethingHere当然是具有属性名称和ID的对象。 请注意，“as”不是用这种方式来expressionng-options，因为它只会设置这个值，当你使用track-by时，你将无法改变它
只有Srivathsa Harish Venkataramana的一个答案提到track by这个问题的解决scheme！
下面是一个例子，以及Plunker（下面的链接）如何在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列表中任何city任何id都具有相同的值，则会在加载时自动select。
这里是Plunker： http ://plnkr.co/edit/1EVs7R20pCffewrG0EmI?p=preview
有关更多详细信息，请参阅源文档： https ： //code.angularjs.org/1.3.15/docs/api/ng/directive/select
被接受的答案使用ng-init ，但文件说如果可能的话避免ng-init。
ngInit的唯一适当的用法是为了重用ngRepeat的特殊属性，如下面的演示所示。 除此之外，您应该使用控制器而不是ngInit来初始化作用域上的值。
你也可以使用ng-repeat代替ng-options选项。 使用ng-repeat ，可以使用ng-repeat特殊属性来ng-selected ng-repeat 。 即$ index，$ odd，$甚至可以在没有任何编码的情况下进行这项工作。
$first是ng-repeat特殊属性之一。
<select ng-model="foo"> <option ng-selected="$first" ng-repeat="(id,value) in myOptions" value="{{id}}"> {{value}} </option> </select>
———————-编辑—————-
虽然这个方法可行，但我更喜欢@ mik-t的答案，当你知道什么值select， https: //stackoverflow.com/a/29564802/454252，它使用track-by和ng-options而不使用ng-init或ng-repeat 。
只有在您不知道要select什么值的情况下select第一个项目时，才应使用此答案。 例如，我正在使用这个自动完成，它需要始终selectFIRST项目。
我的解决scheme是使用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 & 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 & ON</option> </select>
我想我的默认选项返回从我的api的所有值，这就是为什么我有一个空值。 也请原谅我的哈姆。 我知道这不是OP的问题的直接答案，但是人们在Google上发现了这个问题。 希望这可以帮助别人。
使用下面的代码从您的模型中填充选定的选项。
<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>
根据你有多less个选项，你可以把你的值放在一个数组中，然后像这样自动填充你的选项
<select ng-model="somethingHere.values" ng-options="values for values in [5,4,3,2,1]"> <option value="">Pick a Number</option> </select>
在我的情况下，我需要插入一个初始值只告诉用户select一个选项，所以，我喜欢下面的代码：
<select ... <option value="" ng-selected="selected">Select one option</option> </select>
当我用一个空string（= null）的值！=来尝试一个选项的时候，这个选项被replace成了一个angular度值，但是当把这个选项放在这个值上时（空值），用这个选项selectapear。
对不起，我的英语不好，我希望我能帮上忙。
使用select with 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>
这对我有效。
<select ng-model="somethingHere" ng-init="somethingHere='Cool'"> <option value="Cool">Something Cool</option> <option value="Else">Something Else</option> </select>
在我的情况下，因为默认情况下在不同情况下的forms。 我在select标签中添加一个自定义属性。
<select setSeletected="{{data.value}}"> <option value="value1"> value1.... <option value="value2"> value2.... ......
在指令中，我创build了一个脚本来检查值，当angular度填充它时，将该值设置为select的值。
.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上翻译过来，至less这个jist是不错的。
这不是最简单的方法，但是当价值变化的时候就完成了
为了回应本·莱西的回答 ，应该有这条路线
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将默认为该值。 例如：html：
<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 } });
如果你正在使用ng-options来渲染你的下拉菜单，那么默认select的是与ng-modal相同的值。 考虑一下这个例子：
<select ng-options="list.key as list.name for list in lists track by list.id" ng-model="selectedItem">
所以具有相同值的list.key和selectedItem是默认选中的。
如果你有一些东西，而不是只是初始化date部分，你可以使用ng-init()声明在你的控制器中，并在HTML的顶部使用它。 这个函数将像你的控制器的构造函数一样工作，你可以在那里启动你的variables。
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>
我觉得最简单的方法是
ng-selected="$first"
这为我工作
ng-selected="true"
我需要默认的“请select”是不可选的。 我还需要能够有条件地设置默认select的选项。
我实现了这个简单的方式：JS代码：/ /翻转这两个testing选定的默认或没有默认的“请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>
我希望这可以帮助其他有类似要求的人。
“请select”是通过Joffrey Outtier的回答在这里完成的 。
<!-- 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>
尝试在你的angular度控制器…
$ somethingHere = {name：'Something Cool'};
您可以设置一个值，但是您使用的是复杂types，angular度将search键/值以在视图中设置。
而且，如果不起作用，试试这个：ng-options =“option.value as option.name for options in option track by option.name”
