javascript - 已选择 Angular 空白选项

Question

我正在用头撞墙。

我有一个对象数组，将用于填充选择下拉列表:

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>

最初，一切都很好，选择和选项都正确生成，并且第一个选项是正确的。现在，当单击页面上其他位置的某个按钮时，有必要使用较小的类似对象数组重新创建此选择和选项。但是，这样做会创建一个值为“? string:0010 ?”的空白选项。这是选定的选项。同样，我无法使用 ng-options 来纠正此问题，因为这样做不会正确设置选项标记中的 value 属性。因此，我将其添加到选项标签中:

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

现在，这确实将正确的选项标记为已选择。但是，下拉菜单仍然显示空白选项。这是渲染的 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 (删除等于及其后面的所有内容)时，下拉菜单将正确显示正确选择的选项。

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

谢谢!

Answer 1

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

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

希望这可以帮助你。谢谢。