Javascript “显示一个大表”；“角度的方式”；

我试图在表中显示一个大数据集

首先，我只是使用嵌套的ng重复：

<table>
    <tr ng-repeat="row in rows">
        <td>{{row.meta}}</td>
        <td ng-repeat="cell in row.cells">{{cell.data}}</td>
    <tr>
</table>

{{row.meta}}
{{cell.data}

（该代码是我的意思的一个示例，它实际上并不对应于我的数据集。下面的代码是这样的。）

这段代码非常干净，但很容易需要几秒钟来渲染。数据集相当大（屏幕上可以容纳数千个单元格）

我把它改写成这个怪物：

angular.module('systeem3').directive('dayStatusTable', function(){
    return{
        restrict: 'E',
        scope: {
            housestatus: '='
        },
        link: function(scope, elem, attr) {
            // Doing this manually since the Angular way is slooow....
            scope.$watch('housestatus', function(newValue) {
                if (newValue && Array.isArray(newValue)) {
                    var stringparts = ['<table>'];
                    for (houseline of newValue) {
                        stringparts.push('<tr><td>'+houseline.houseName+'</td>');
                        for (day of houseline.daystatus) {
                            var date = day.date.split('-')[2];
                            var weekday = day.date.split('-')[3];
                            var weekendOrWeekday = (weekday == 0 || weekday == 6) ? 'weekend' : 'weekday';
                            stringparts.push('<td class="',
                                             day.status, ' ',weekendOrWeekday,
                                             '">',
                                             date,
                                             '</td>');
                        }
                        stringparts.push('</tr>');
                    }
                    stringparts.push('</table>');

                    elem.html(stringparts.join(''));
                }
            });
        },
    }
});

angular.module（'systeem3'）.directive（'dayStatusTable'，function（）{
返回{
限制：'E'，
范围：{
房屋状况：'='
},
链接：功能（范围、要素、属性）{
//手动执行此操作，因为角度方向为Sloow。。。。
范围.$watch（'housestatus'，函数（newValue）{
if（newValue&&Array.isArray（newValue））{
var stringparts=['']；
对于（newValue的房屋线）{
stringparts.push（“”+houseline.houseName+“”）；
用于（房屋线路的日期。日期状态）{
var date=day.date.split（'-'）[2]；
var weekday=day.date.split（'-'）[3]；
var weekendOrWeekday=（weekday==0 | | weekday==6）？“weeken”：“weekday”；
stringparts.push（“”，
日期，
'');
}
stringparts.push（“”）；
}
stringparts.push（“”）；
elem.html（stringparts.join（“”））；
}
});
},
}
});

结果是惊人的：渲染时间从几秒钟缩短到不到50毫秒，大部分时间都被

elem.html（）

调用占用

---

然而，代码看起来很可怕，而且非常没有棱角。如何改进这一点？

对于非常大的表格检查。它支持虚拟化（如果DOM行现在不可见，它不会添加到DOM行中），并且可以非常顺利地处理10000多行。

IMO，这应该发布在

codereview.stackexchange.com

上。我很犹豫是把它放在那里还是这里。因为我问的是如何导入我的代码，所以它适合这里，但它适合这里，因为我也问的是如何在一般情况下呈现角度较大的表。您发布的两种解决方案非常不同。使用

ng repeat

，Angular为每一行和单元格创建一个scope对象，并设置监视程序以提供数据绑定。您的自定义指令只是生成静态HTML。但是你的指令不是“无角度的”——你仍然在使用自定义指令在框架内工作。啊，这就是我“应该”做的方式？（如果真有这样的事情，把分解等与角度无关的事情放在一边）是的，尽管正如enkryptor的回答所暗示的那样，虚拟化可能更好。DOM中有大量（甚至是静态）节点会降低整体性能。对于我所寻找的内容来说，这可能有点重，它似乎更倾向于类似电子表格的数据。所示示例中的表格也没有我的紧凑，我给出的示例很容易同时在屏幕上显示2000多个单元格。