Question

我有一个使用ng-options的选择菜单重复选项，菜单中有一个默认的<option>：

<select ng-model="selected" ng-options="d.id as d.value for d in data">
  <option value="">Choose an option</option>
</select>

问题：我想这样做，以便默认选项中的文字根据$scope中的其他属性进行更改，我尝试了以下操作，但它不起作用：

<select ng-model="selected" ng-options="d.id as d.value for d in data">
  <option value="" ng-if="!optional">Choose an option</option>
  <option value="" ng-if="optional">Choose an option (optional)</option>
</select>

它似乎只显示一个默认的<option>元素，所以我也尝试了以下ng-show，但它也不起作用：

<select ng-model="selected" ng-options="d.id as d.value for d in data">
  <option value="">Choose an option <span ng-show="optional">(optional)</span></option>
</select>

我知道您也可以在选择菜单中执行<option ng-repeat>，但选项的数据来自AJAX调用，并且在数据首次出现时无法正确更新，因此我坚持使用<select ng-options>。

Here's a JSFiddle有问题。

关于如何让它发挥作用的任何建议？

Answer 1

你的第一次尝试没有用，因为正如the documentation of select in AngularJS所述，只有“单个硬编码<option>元素可以嵌套到{{1}中元素“。

您的第二次尝试无法正常运行，因为<option>元素只能接收“文字（最终转义字符为<select>）”作为内容，而不是é之类的任何标记你试过了。

解决方案就是使用插值：

<span>

Answer 2

您是否尝试过使用模板标记设置文字？

<select ng-model="selected" ng-options="d.id as d.value for d in data">
  <option value="">{{defaultOptionText}}</option>
</select>

在这个jsfiddle工作：http://jsfiddle.net/udu9byka/2/

AngularJS - 更改ngOptions中的默认选项文本

2 个答案: