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>

最初，一切都很好，正确生成了选项和选项，第一个选项是正确的。现在，当在页面上的其他位置单击某个按钮时，有必要使用较小的类似对象数组重新创建此选择和选项。但是，这样做会创建一个空白选项，其值为＆＃34;？ string：0010？＆＃34;。这是选中的选项。同样，我不能使用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

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>

希望这可以帮到你。感谢。

选择了角度空白选项

2 个答案: