0

我正在制作一个自定义指令，它将分页并使我的表格可排序。我正在尝试使多种数据类型与排序一起工作，而无需用户付出任何努力。这是我的 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 本身仍然在那里占用空间。所以，我最终得到了三个列标题和三个以上的列。据我所知， ng-if 应该从 DOM 中删除整个元素。

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

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

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

更新：

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

4

1 回答 1

2

两种方法可以让你做得更好，而无需产生额外的 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 逻辑在内部添加一个跨度

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

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

于 2015-01-12T21:49:53.670 回答