Angular 已选择空白选项

Question

我正在用头撞墙。

我有一个对象数组，将用于填充 select 下拉列表：

CardCount = [{"ClientId": "0010", "Description": "0010 (206 Members)"}, {"ClientId": "0051", "Description": "0051 (1 Member)"}, ........]

当我尝试使用 ng-options 时，选项的值设置为索引，而不是所需的 ClientId。为了让每个选项中的值成为 ClientId，我必须在选项中使用 ng-repeat。这是我的 html:

<select ng-model="CurrentClient">
    <option ng-repeat="item in CardCount" value="{{item.ClientId}}">{{item.Description}}</option>
</select>

最初，一切正常，select 和选项生成正确，第一个选项正确。现在，当在页面上的其他地方单击某个按钮时，有必要重新创建此 select 和具有类似对象的较小数组的选项。但是，这样做会创建一个值为“? string:0010 ?”的空白选项。这是 selected 的选项。同样，我不能使用 ng-options 来纠正这个问题，因为这样做没有正确设置选项标签中的 value 属性。所以，我将其添加到选项标签中：

<option ng-repeat="item in CardCount" value="{{item.ClientId}}" ng-selected="CurrentClient == item.ClientId">{{item.Description}}</option>

现在，这确实将正确的选项标记为 selected。但是，下拉列表仍然显示空白选项。这是呈现的 html:

<select ng-model="CurrentClient">
    <option value="? string:0010 ?"></option>
    <option value="0010" selected="selected">0010 (206 Members)</option>
</select>

如您所见，它将正确的选项设置为 selected。但是，它将其设置为 selected="selected"，而不仅仅是 selected。当我检查元素并将 selected="selected" 更改为 selected（删除等号及其后的所有内容）时，下拉菜单会正确显示正确的 selected 选项。

同样，最初 select 和选项效果很好。该问题似乎仅在创建 select 的数组发生更改后才会发生。我怎样才能在更改数组后使 select 和选项正常工作，而不显示第一个空白选项？

谢谢！

Answer 1

ng-options 绝对是正确的选择：

<select ng-model="selected.ClientId" ng-options="it.ClientId as it.Description for it in clientList">
    <option value="">-</option>
</select>

Answer 2

将您的选项元素更改为默认设置值。

<option ng-repeat="item in CardCount track by item.ClientId" 
value="{{item.ClientId}}">{{item.Description}}</option>

希望对您有所帮助。谢谢

Angular 已选择空白选项

Angular blank option selected

javascript

angularjs

select

angularjs-ng-repeat

html-select