Question

我正在尝试为带有角度的选择添加默认选项，但它会添加一个空白选项，当我选择它时会奇怪地消失。

我正在使用ng-options这样的对象绑定到select。我附加了一个默认选项：

var DocumentSearchController = function (documentsService) {
    documentsService.getDocTypes().then(function (results) {
        this.documentTypes = results.data;
        this.documentTypes.unshift({ DocumentTypeID: null, Name: 'Select a Document Type' });
    }.bind(this));

对象的结构是：

[{DocumentTypeID: 1, Name: 'Blah'}]

然后我使用ng-options来绑定对象：

<select class="form-control"
        id="documentTypeSelector"
        name="documentTypeSelector"
        ng-model="vm.selectedDocumentType"
        ng-options="option.Name for option in vm.documentTypes | orderBy: 'option.DocumentTypeID':false track by option.DocumentTypeID">
</select>

然后讨厌的是，我选择了一个项目时，奇怪地添加了一个空白选项。

这些选项也没有订购，所以我怀疑我的列表理解是错误的。

Answer 1

要定义默认的<select>元素，只需为ng-model绑定变量分配一个<option>元素（或值）中的默认值。

在您的情况下，vm.selectedDocumentType应设置为vm.documentTypes[theIndexYouChoose].DocumentTypeID

一般来说，更简单的例子可能是

// given $scope.options = [1, 2, 3];
<select ng-init="selectedOption=1" ng-option="option for option in options" ng-model='selectedOption'>
</select>

您将找不到空选项，所选选项将为1

Answer 2

您可以这样添加默认值：

<select class="form-control"
        id="documentTypeSelector"
        name="documentTypeSelector"
        ng-model="vm.selectedDocumentType"
        ng-options="option.Name for option in vm.documentTypes | orderBy: 'option.DocumentTypeID':false track by option.DocumentTypeID">
    <option value="">Select a Document Type</option>
</select>

编辑或使用初始化功能

<select class="form-control"
        ng-init="vm.selectedDocumentType= vm.documentTypes[0]" 
        id="documentTypeSelector"
        name="documentTypeSelector"
        ng-model="vm.selectedDocumentType"
        ng-options="option.Name for option in vm.documentTypes | orderBy:'option.DocumentTypeID':false track by option.DocumentTypeID">
</select>

为angularjs选择添加默认选项

2 个答案: