我有此代码。
<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>
#1 楼
您可以像这样简单地使用ng-init<select ng-init="somethingHere = options[0]"
ng-model="somethingHere"
ng-options="option.name for option in options">
</select>
评论
我在执行此操作时遇到问题,这是因为我正在使用“跟踪依据”,将其删除可解决此问题,以防万一可以帮助某人:D
– DrCord
2014年4月15日23:21
这个答案没有问题,但是ng-init在我的特定情况下对我来说失败了。问题是我正在使用的值在ng-init运行时尚不可用:我通过ajax调用获得了该值,而此时ng-init已经完成。最后,我对该值使用了监视程序,并且在该函数中执行的操作与ng-init中的操作相同。那行得通。
–毛利人
2014年9月5日14:02
我也没有解决这个问题,@ maurits的评论将我带到了这个stackoverflow.com/questions/22348886享受!
–迈克尔
2014-12-5 16:16
Angular的文档说最好使用控制器$ scope初始化这些类型的值docs.angularjs.org/api/ng/directive/ngInit
– t
2015年3月17日14:01
警告:为此目的使用ng-init可能导致对$ digest()方法的过多调用,这可能会导致控制台输出看起来像是“达到$ 10 $ digest()迭代次数。正在中止!”这样的消息,看上去很丑陋。
–毁灭者DMac
15年4月27日在22:27
#2 楼
如果要确保在视图初始化时$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>
评论
该解决方案效果很好,并且比所选答案更好。
– majgis
2014年3月7日15:16
ng-init看起来不应该是这样ng-init =“ somethingHere = somethingHere || options [0]”?
– infinitloop
14年7月25日在15:07
如何处理选项为空?就像在期权的情况下,数据来自外部来源。
–空
15年5月4日在21:11
@suud您只需要在ng-init中检查options && options.length> 0。确实,大多数操作应在您的控制器中完成,因此可以测试。
– Ben Lesh
2015年5月5日17:11
@BenLesh如果我想写一些文本(字符串)而不是第一个选项。ng-init =“ somethingHere = somethingHere ||'选择一个'”我试图这样做。但这没用。我的代码有什么问题
– codelearner
16-3-28在7:01
#3 楼
试试这个: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 to
...
$scope.selectedOption = $scope.options[0].value;
考虑到上述情况,这里还有另一个柱塞。
评论
问题是我必须对大量选择框执行此操作。
– iConnor
2013年8月12日19:07
没明白。你要怎么办
–迈克尔·本福德(Michael Benford)
13年8月12日在19:15
我可能需要手动为50多个选择框进行操作
– iConnor
13年8月12日在19:20
您是说要为每个选择框设置默认值?如果是这样,我想您的问题还不清楚。无论如何,我是否假设您必须将项目加载到每个选择框中?如果是这样,我认为初始化它们的默认值并不重要。
–迈克尔·本福德(Michael Benford)
2013年8月12日19:46
我的问题是选项的索引是从表单上的“提交”返回的。我需要的是您正在调用的option.name,这是从普通的旧rails表单返回的内容。复选框和单选按钮可以正常工作,因为您使用ng-repeat来获取正确的标记。如何在表单提交时返回option.name?
– pferrel
2014年1月4日,0:53
#4 楼
Srivathsa Harish Venkataramana仅有一个答案提到了track by
,这确实是一个解决方案!这里有一个示例,以及Plunker(下面的链接),介绍了如何在选择的
track by
中使用ng-options
:<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
是在角度范围内定义的,并且具有id
属性,并且其值与id
列表中任何city
的cities
的值相同,则会在加载时自动选择。br />
这是为此的Plunker:
http://plnkr.co/edit/1EVs7R20pCffewrG0EmI?p=preview
请参见源代码文档以获取更多详细信息:
https://code.angularjs.org/1.3.15/docs/api/ng/directive/select
评论
谢谢它帮助我;)
–卜拉欣·拉姆贾瓜(Brahim LAMJAGUAR)
17年3月28日在9:09
太棒了!谢谢!
– Iurii Golskyi
17/12/25在15:47
#5 楼
我认为,在包含“ 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
时将无法更改它。
评论
这对我有用。我认为angular需要一些东西来识别我的范围模型中的对象,等同于选择参考列表。 “通过guarantor.code跟踪”成功了!
– markbaldy
2014年6月9日11:00
#6 楼
可接受的答案使用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
。仅当您必须选择第一个项目而不知道要赋予什么值时,才应使用此答案。选择。例如,我正在使用它进行自动完成,这需要一直选择第一项。
评论
这是可行的,但不应使用,因为ng-options比ng-repeat更快,更优化。
– iso
15年6月17日在8:00
@Iso与您不同意,但是您有该信息的来源吗?
–亚当·普洛彻(Adam Plocher)
17年8月21日在13:41
就在文档中:docs.angularjs.org/api/ng/directive/ngOptions“在通过选择将
#7 楼
我的解决方案是使用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上找到它。希望这对其他人有帮助。
评论
我已经尝试将其转换为html,但是在我尝试过的所有在线转换器中都失败了。
– iConnor
2014年5月13日在18:09
为什么不发布html?我的意思是,发布这样的代码真的必要吗?这并不是OP在问题中使用模板引擎。
–arg20
14年6月20日在1:03
#8 楼
使用下面的代码填充模型中的选定选项。<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-model的调用慢一点,因此这种方法对我有很大帮助。感谢Eebbesen :-)
–ajaysinghdav10d
16年5月11日在16:11
这对我也适用。简单易懂。
–肯特·阿吉拉尔
16年8月8日在18:00
#9 楼
根据您拥有的选项数量,您可以将值放入数组并像这样自动填充选项<select ng-model="somethingHere.values" ng-options="values for values in [5,4,3,2,1]">
<option value="">Pick a Number</option>
</select>
#10 楼
就我而言,我只需要插入一个初始值以告知用户选择一个选项,所以,我喜欢下面的代码:<select ...
<option value="" ng-selected="selected">Select one option</option>
</select>
当我尝试使用值为!=的空字符串(null)的选项,该选项已替换为angular,但是,当放置这样的选项(具有null值)时,带有该选项的选择就会出现。
对不起,我的英语不好,希望我对此有所帮助。
#11 楼
结合使用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>
plnkr.co
有关具有角度数据绑定的HTML
SELECT
元素的官方文档。将
select
绑定到非字符串通过ngModel
解析/格式化的值: (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>
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>
jsfiddle
#12 楼
这对我有用。<select ng-model="somethingHere" ng-init="somethingHere='Cool'">
<option value="Cool">Something Cool</option>
<option value="Else">Something Else</option>
</select>
#13 楼
就我而言,因为默认格式因大小写而异。我在select标记中添加了一个自定义属性。
<select setSeletected="{{data.value}}">
<option value="value1"> value1....
<option value="value2"> value2....
......
在指令I中创建了一个脚本来检查该值,并在将其填充角度时将其值设置为选定。
.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,至少不是漏洞,这是正确的。
这不是最简单的方法,但是当值变化时就可以完成
#14 楼
为了回应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>
#15 楼
只需按以下方式使用ng-selected="true"
:<select ng-model="myModel">
<option value="a" ng-selected="true">A</option>
<option value="b">B</option>
</select>
#16 楼
我将在控制器中设置模型。然后,选择将默认为该值。例如:html:
<select ng-options="..." ng-model="selectedItem">
角度控制器(使用资源):
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
}
});
#17 楼
这对我有用ng-selected="true"
评论
最好的方法是使用ng-init,因为您正在设置ngModel。
–萨尔瓦多(Juanjo Salvador)
16-10-26在10:16
#18 楼
如果使用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
的选项。#19 楼
我需要默认的“请选择”才能取消选择。我还需要能够有条件地设置默认的选定选项。我通过以下简单的方法实现了此目的:
JS代码:
//翻转这2个代码以测试选择的默认值或不使用默认的“请选择”文本的默认值
//$scope.defaultOption = 0;
$ scope.defaultOption = {键:'3',值:'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的回答在此处完成的。
#20 楼
如果您有其他事情,而不仅仅是初始化日期部分,则可以通过在控制器中声明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>
#21 楼
<!--
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>
#22 楼
在您的角度控制器中尝试一下...$ somethingHere = {name:'Something Cool'};
您可以设置一个值,但是您使用的是复杂类型并且角度将搜索要在您的视图中设置的键/值。
并且,如果不起作用,请尝试以下方法:
#23 楼
我认为最简单的方法是 ng-selected="$first"
评论
该答案提供了零上下文。
–pspahn
2015年4月9日18:57
评论
如果有一个答案不假定使用angular来构建选项,那就太好了。如果选项已经成为标记的一部分怎么办?@pspahn-根据docs.angularjs.org/api/ng/directive/ngOptions:仅将一个**硬编码的