嵌套 ng-repeat，用于非常缓慢地创建表格<TD>渲染

Question

我是AngularJS的新手。我的动态UI（html表）如下所示。

ID | Name | CardNo |26 |27 |28 | 29 | 30 | 31 | 1 | 2 |3 | 11 |12...........|25   
1     A        001           p    p    P    p   p   P           p

我的Json格式看起来像

var empAttendance=[{id:1，卡号："001"，名称："A"，出席人数：[｛"id"：1，"day"：28｝，｛"id2，"day"：29｝，｛"id"：4，"day"：31｝，｛"id5，"day"：2｝，｝]}]；

dtRange=[26,27,28,29,31,1,2,3…………..25]；

视图（html）：

<table>
  <thead>
    <tr>
      <th>ID</th> 
      <th>CardNo</th>
      <th>Name</th>
      th data-ng-repeat="dt in vm.dtRange">{{dt}}</th>                                     
    </tr>
  </thead>
  <tbody>
    <tr data-ng-repeat="p in vm.employeeAtt">
        <td>{{p.id}}</td>
        <td>{{p.cardNo}}</td>
        <td>{{p.name}}</td>
        <td data-ng-repeat="dt in vm.dtRange">
          <span data-ng-repeat="att in p.attendance" ng-if="dt == att.day">P</span>
        </td>
     </tr>
   </tbody>
</table>

似乎，一名员工在日期范围内有多个考勤（列标题）。我试图根据日期值并通过匹配列标题将"P"放入td单元格。我不需要任何分页，并将加载所有已筛选的员工列表关联的出席人数。

然而，上述逻辑如预期的那样工作。但是"渲染非常非常缓慢。甚至我也评论了内线‘P’。

我的员工人数最少为500人，最多为3000人。我还尝试了缓存数据，并确保渲染速度缓慢。我确实限制了重复。但是仍然没有显著的性能变化。

任何想法都会对我很有帮助。我正在使用Angularjs 1.5.0

谢谢

Answer 1

这是Angular和大型数据集的常见问题。不幸的是，你不能做很多事情来改变行为，但如果你愿意放弃一些功能，你可以加快它。

实际上，问题是所有这些数据都被绑定了。此表单需要实时更新吗？或者你只是在展示它？如果你有500名员工，而你的约会范围是30天，那么已经有15000名观众了！此外，您还添加了更多带有<span>标签的观察者。除此之外，您正在执行有条件的评估！

我建议静态显示这些数据。这是一个很好的库：https://github.com/Pasvaz/bindonce

如果你不需要观察者，它可以让你放弃他们，并且仍然使用ng重复方法显示你的数据。

如果你绝对必须绑定你的数据，因为你正在进行实时更新或其他什么，你真的应该考虑对你的结果进行分页。这将大大减少观察者的数量。

这是另一个很好的资源，可以优化您的页面以提高性能。https://tech.small-improvements.com/2013/09/10/angularjs-performance-with-large-lists/