Angular JS Multiple Select Options添加了额外的？ 选项

Question

我正在这样填充我的多个选择：

<select ng-model="myAddress" ng-options="address.addressLines for address in search.result.addresses" >
</select>

目前有2个项目。 但是当我加载页面时，似乎添加了一个额外的空白行，例如

<option value="?" selected="selected" label=""></option>

但是，当我单击我的实际2行时，以上错误行消失了。 你知道是什么原因造成的吗？

Answer 1

当选择最初加载到视图中时，未从控制器设置模型（myAddress）。 Angular需要一种表示方法，因此它向选择框添加了一个空选项。 一旦做出选择，它就会被填充并摆脱空选项，因为未在绑定到该选择的列表中定义它。

如果不想出现空白选项，则需要在控制器中设置一个有效的$ scope.myAddress用作默认值。

根据您要完成的工作，实际上有三种选择。

1. 您可以将其保留为现在可用，在进行选择之前可以使用空选项。
2. 在控制器中设置一个初始值，这样就不会有空选项。
3. 即使已将值设置为选择值，也始终有一个空选项可用。

这里的例子：

HTML：

<div ng-app="myApp" ng-controller="MainController">
    Select with no value set in controller:<br />
    <select ng-model="select1" ng-options="item.name for item in items">
    </select> {{select1}}
    <br /><br />
        Select with value set in controller:<br />
    <select ng-model="select2" ng-options="item.name for item in items">
    </select> {{select2}}
    <br /><br />
        Select empty option always available (even after selection):<br />
    <select ng-model="select3" ng-options="item.name for item in items">
        <option value=""></option>
    </select> {{select3}}
</div>

使用Javascript：

angular.module("myApp", [])

.controller("MainController", function ($scope) {
    $scope.items = [
        {id: 1, name: "Item 1"},
        {id: 2, name: "Item 2"},
        {id: 3, name: "Item 3"},
        {id: 4, name: "Item 4"}
    ];

    //initial value for select2
    $scope.select2 = $scope.items[0];    
});