我已经搜索了谷歌,在这个上面什么也找不到。
我有这个代码。
<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>
我需要默认的“请选择”是不可选择的。我还需要能够有条件地设置默认选择选项。
我通过以下简单的方法做到了这一点:
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的回答完成的。
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-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。
这个答案只适用于当你必须选择第一项而不知道选择什么值时。例如,我正在使用这个自动完成,它需要一直选择第一个项目。