ng-if 仅删除我 table 中的 innerHTML

Question

我正在制作一个自定义指令，它将分页并使我的 table 排序 table。我试图做到这一点，以便多种数据类型可以在用户不费吹灰之力的情况下进行排序。这是我的 templateUrl 中有问题的 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 本身仍然在那里占用 space。因此，我最终得到了三个 headers 列和三个以上的列。据我所知，ng-if 应该从 DOM.

中删除整个元素

这是我的另一个重要代码：

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

至于cndPaginatedObject，它只是一个objects的数组，其中包含多个字符串。提前感谢您的帮助！

更新：

只是想我还要补充一点，cndTableHeaders 字面意思是 table headers。 cndPaginatedObject 使用 table headers 作为每个值的键。这样它们就会以正确的顺序出现在 table.

中

Answer 1

两种方法可以更好地完成您正在做的事情，而无需生成额外的 dom 并循环 ng-repeat 两次

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

    <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 逻辑在里面添加一个 span

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

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

ng-if 仅删除我 table 中的 innerHTML

ng-if only deletes innerHTML in my table

html

javascript

angularjs

ng-repeat

angular-ng-if