我已经搜索了谷歌，在这个上面什么也找不到。
我有这个代码。
<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的回答完成的。
试试这个:
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;
考虑到上述情况，这里又一个普伦克。
我的解决方案是使用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问题的直接回答，但人们在谷歌上找到了这个。希望这能帮助到其他人。
如果你有一些东西，而不仅仅是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>
