angular-ui-select with empty <option>显示2个空字段

Question

我正在使用angular-ui-select下拉列表。我需要有你可以取消的下拉列表。

以下是我在模板中的下拉列表：

<select ui-select2="select2Options" name="Machine" ng-model="selectedMachine.type" data-placeholder="type" required>
    <option value=""></option>
    <option ng-repeat="type in machineTypes" value="{{type}}">{{type}}</option>
</select>

以下是select2Options：

$rootScope.select2Options = {
  minimumResultsForSearch: 5,
  allowClear: true,
  ...
}

结果如下：

正如你所看到的，有一个取消按钮（它可以工作），但是在左边的图片上发生了一些奇怪的事情。 <option value=""></option>的原因可以检查两个空字段。

如果删除<option value=""></option>，则奇怪的空字段会消失，但是也没有取消按钮：

如何设置取消按钮并且没有空字段？

angular：v1.4.8
angular-ui-select2：v0.0.5
select2：v3.4

Answer 1

试试这个

  <select ui-select2="select2Options" name="Machine" ng-model="selectedMachine.type" data-placeholder="type" required>

<option value="" selected="selected">Select Machine</option>
<option ng-repeat="type in machineTypes" value="{{type}}">{{type}}</option>
</select>

Answer 2

我知道这是一个非常糟糕的黑客，但在我的情况下，我无法更新＆＃34; angular-ui＆＃34;到最新版本。

1. 转到 angular-ui.js
2. 找到 angular.module（＆＃39; ui.select2＆＃39;
3. 更改＆＃34; 优先级：1 ＆＃34; 优先级：1001

显然在较新版本的AngularJs中，ng-repeat的优先级增加到1000，所以它在＆＃34; select2＆＃34;之前修改了DOM。指令设立了观察者。

通过增加优先级，当ng-repeat添加＆＃39;选项＆＃39;对于DOM，select2已经在观看了。

Answer 3

您的代码可能是这样的：

<select ui-select2="select2Options" name="Machine" ng-model="selectedMachine.type" data-placeholder="type" ng-options="item.type for item in machineTypes" required>
    <option value=""></option>
</select>