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

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>.

这是一个有问题的JSFiddle.

关于如何让这个工作的任何建议？

Answer 1

你的第一次尝试不起作用,因为正如AngularJS中的文档select所述,只有" 单个硬编码<option>元素可以嵌套到<select>元素中".

你的第二次尝试不起作用,因为该<option>元素只能接收"文本(最终转义字符é)"作为内容,而不是像<span>你尝试过的任何标记.

解决方案就是使用插值:

<select ng-model="selected" ng-options="d.id as d.value for d in data">
    <option value="">Choose an option {{optional ? '(optional)' : ''}}</option>
</select>