ng-if 只删除我表中的内部 HTML

ng-if only deletes innerHTML in my table

本文关键字：内部 HTML 删除 ng-if      更新时间：2023-09-26

我正在制作一个自定义指令，它将分页并使我的表可排序。 我正在尝试使多种数据类型无需用户费力即可进行排序。 这是我的模板网址中有问题的html：

        <tr ng-repeat="row in cndPaginatedObject track by $index">
            <td ng-repeat="data in row track by $index" ng-if="!isValidDate(row[cndTableHeaders[$index]])">
                {{row[cndTableHeaders[$index]]}}
            </td>
            <td ng-repeat="data in row track by $index" ng-if="isValidDate(row[cndTableHeaders[$index]])">
                {{row[cndTableHeaders[$index]] | date: cndDateFormat}}
            </td>
        </tr>
我更喜欢使用 ng-if 而不是 ng-show/hide

，因为它会不必要地使用 ng-show/hide 复制 DOM 元素，并且不显示它们。 我已经尝试了两种方式，但无论哪种方式我都得到了相同的结果。 带有日期的列的内容不会显示，但 td 本身仍然占用空间。 因此，我最终有三个列标题和三个以上的列。 据我所知，ng-if 应该从 DOM 中删除整个元素。

这是我的另一个意义代码：

        scope.isValidDate = (data) => {
            var timestamp = Date.parse(data);
            return !(isNaN(timestamp));
        }

至于cndPaginatedObject，它只是一个包含多个字符串的对象数组。 提前感谢您的任何帮助！

更新：

只是想我还要补充一点，cndTableHeaders实际上是表头。 cndPaginatedObject 使用表头作为每个值的键。 这样，它们就会以正确的顺序显示在表中。

两种方法可以做得更好，而无需产生额外的 dom 并循环重复两次 ng 重复

做你想做的事情的更好方法是

    <tr ng-repeat="row in cndPaginatedObject track by $index">
        <td ng-repeat="data in row track by $index">
            {{(!isValidDate(row[cndTableHeaders[$index]])) ? row[cndTableHeaders[$index]] : row[cndTableHeaders[$index]] | date: cndDateFormat}}
        </td>
    </tr>

或者使用 ng-if 逻辑在

    <tr ng-repeat="row in cndPaginatedObject track by $index">
        <td ng-repeat="data in row track by $index"">
            <span ng-if="!isValidDate(row[cndTableHeaders[$index]])>
                {{row[cndTableHeaders[$index]]}}
            </span>
            <span ng-if="isValidDate(row[cndTableHeaders[$index]])">
                {{row[cndTableHeaders[$index]] | date: cndDateFormat}}
            </span>
        </td>
    </tr>

或者，您可以创建自己的过滤器来检查日期是否有效，然后使用日期过滤器对其进行过滤。

相关文章：