Question

使用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来检查是否提供了值，如果没有，请插入替换文字？

Answer 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]是您的选项模型 - 但您需要在控制器中手动更新所有必需的更改。

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

1 个答案: