关于javascript：如何在Angular.js选择框中有一个默认选项


How to have a default option in Angular.js select box

我在谷歌上搜索过，找不到任何相关信息。

我有这个密码。

1
2
3
<select ng-model="somethingHere"
        ng-options="option.value as option.name for option in options"
></select>

像这样的数据

1
2
3
4
5
6
7
options = [{
   name: 'Something Cool',
   value: 'something-cool-value'
}, {
   name: 'Something Else',
   value: 'something-else-value'
}];

输出是这样的。

1
2
3
4
5
6
7
8
<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>

如何将数据中的第一个选项设置为默认值，以便得到这样的结果？

1
2
3
4
<select ng-model="somethingHere" ....>
    <option value="0" selected="selected">Something Cool</option>
    <option value="1">Something Else</option>
</select>
相关讨论

如果您想确保您的$scope.somethingHere值在视图初始化时不会被覆盖，您将希望合并(somethingHere = somethingHere || options[0].value您的ng init中的值，如下所示：

1
2
3
4
<select ng-model="somethingHere"
        ng-init="somethingHere = somethingHere || options[0].value"
        ng-options="option.value as option.name for option in options">
</select>
相关讨论

试试这个：

HTML

1
2
3
4
<select
    ng-model="selectedOption"
    ng-options="option.name for option in options">
</select>

JavaScript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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属性更改为

1
ng-options="option.value as option.name for option in options"

和javascript

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

这里的另一个劫掠者正在考虑上述问题。

相关讨论

斯利瓦萨·哈里什·文卡塔拉马纳只有一个答案提到了track by，这确实是解决这个问题的办法！

下面是一个示例，以及如何在Select ng-options中使用track by的Plunker(链接如下)：

1
2
3
4
<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属性与cities列表中任何city的任何id属性值相同，则它将在加载时自动选择。

Here is Plunker for this:

有关详细信息，请参阅源文档：https://code.angularjs.org/1.3.15/docs/api/ng/directive/select

相关讨论

我认为，在包含"track by"之后，您可以在ng选项中使用它来获得所需的内容，如下所示

1
 <select ng-model="somethingHere" ng-options="option.name for option in options track by option.value"></select>

这样做更好，因为当您想用对象列表替换字符串列表时，只需将其更改为

1
 <select ng-model="somethingHere" ng-options="object.name for option in options track by object.id"></select>

当然，其中somethingere是一个具有属性名和ID的对象。请注意，"as"不用于表示ng选项，因为它只设置值，并且在使用track by时无法更改。

相关讨论

接受的答案使用ng-init，但是文件说如果可能的话避免ng init。

The only appropriate use of ngInit is for aliasing special properties
of ngRepeat, as seen in the demo below. Besides this case, you should
use controllers rather than ngInit to initialize values on a scope.

您也可以使用ng-repeat而不是ng-options作为您的选项。使用ng-repeat可以将ng-selected与ng-repeat特殊属性一起使用。也就是说，$index，$odd，$even可以不用任何编码就可以工作。

$first是ng重复序列的一种特殊性质。

1
2
3
4
5
  <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。

只有当您必须选择第一个项目而不知道要选择什么值时，才应使用此答案。例如，我使用这个来自动完成，这需要一直选择第一个项目。

相关讨论