使用 ng-if 将数据插入 ng-options答案

【问题标题】：Inserting data with ng-if into ng-options使用 ng-if 将数据插入 ng-options
【发布时间】：2018-02-27 20:03:12
【问题描述】：

使用 AngularJS，我有一个事务表，用户可以在其中每个事务有多个项目，并且对于每个项目，他们可以选择留下参考。对于他们不想留下参考的项目，将插入替换文本[No client reference provided]，这是通过data-ng-if 条件在其他页面上完成的，如下所示：

<span class="txt-grey" data-ng-if="item.clientRef == ''">[No client reference provided]</span>
<span data-ng-if="item.clientRef !== ''">{{item.clientRef}}</span>

如果事务中只有一个项目，则参考/替换文本显示为字符串，如果每个事务有多个项目，则将它们插入到选择下拉列表中，如下所示：

<tr data-ng-repeat="item in $ctrl.tableData" data-ui-sref-active="active">
    <td>
        <span data-ng-if="item.renewalUIs.length === 1" data-ng-repeat="patent in item.renewalUIs">
            <span data-ng-if="patent.patentUI.patentApplicationNumber.length">
                {{patent.patentUI.patentApplicationNumber}}
            </span>
        </span>
        <select data-ng-if="item.renewalUIs.length > 1" data-ng-options="item.patentUI.patentApplicationNumber for item in item.renewalUIs" data-ng-model="$ctrl.patentAppData.defaultSelect" data-ng-if="" data-ng-change="$ctrl.transactionListFilter($ctrl.patentAppData.defaultSelect, 'patentAppFilter', item.id)" class="pill-radius form-control font-body">
            <option value="">Multiple</option>
        </select>
    </td>
</tr>

问题是，如果没有提供客户参考，下拉菜单是空白的。我需要应用相同的逻辑（与 span 元素一样）提供条件并在未提供值时插入 [No client reference provided]。

问题

有没有办法结合ng-if和ng-options来检查是否提供了值，如果没有，插入替换文本？

【问题讨论】：

标签： angularjs angularjs-ng-repeat ng-options

【解决方案1】：

首先你可能有几个选择：

<select ng-if="condition" ng-options="...">
<select ng-if="!condition" ng-options="...">

其次，您可能对选项有条件：

<select ng-options="item.patentUI.patentApplicationNumber for item in item.renewalUIs">
<option ng-if="!item.renewalUIs.length">empty option</option>

上述两种方式可能会产生一些副作用，具体取决于您的数据更改/动画/旧浏览器支持等的具体方式。最后一种是最灵活的 - 使您的视图尽可能简单：

<select ng-options="item.patentUI.patentApplicationNumber for item in $ctrl.options[item.id]" ng-model="$ctrl.patentAppData.defaultSelect" class="pill-radius form-control font-body">
        </select>

$ctrl.options[item.id] 是您的选项模型 - 但您需要在控制器中手动更新它以进行所有必需的更改。

【讨论】：