如何在Angular.js选择框中设置默认选项

Question

我在谷歌上搜索了一下，没有找到任何关于这个的信息。

我有这个密码。

<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>

Answer 1

尝试以下操作：

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="option.value as option.name for option in options"

以及Javascript

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

考虑到上述情况，这里又是一次抢劫。

Answer 2

如果要确保您的<代码>$范围。当视图初始化时，somethingHere值不会被覆盖，您需要合并ng init中的值，如下所示：

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

Answer 3

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

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