如何加快 Angular.js 中复选框的渲染表

Question

我正在制作一个系列图表工具。对于每个系列，我有 4 个类别。我希望用户能够选择要绘制的系列和类别的任意组合。

为了实现这一点，我使用 Angular.js 创建了一个引导模式，其中包含一个复选框表，用于每个系列/类别组合。它可以工作，但是当系列太多时，我发现模态的渲染太慢了：

  <table class="table table-striped table-bordered table-hover">
    <thead>
      <tr>
        <th>Series Name</th>
        <th ng-repeat="col in cols">
          {{ col }}
        </th>
        <th>select all</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="(name, insts) in items"
          ng-show="([name] | filter:query).length > 0">
        <td>{{ name }}</td>
        <td ng-repeat="inst in insts">
          <input type="checkbox" ng-model="inst.isSelected">
        </td>
        <td><ui-select-all items="insts" prop="isSelected"></ui-select-all></td>
      </tr>
  </table>

我所拥有的 Plunker 演示：http://plnkr.co/edit/1zmZMpDsGwaKdyL7dFty?p=preview

我只是在学习 Angular，所以我不太确定如何加快速度，或者是否有比使用一大堆复选框更智能的方法。

Answer 1

加速任何 ng-repeat 的最佳方法是使用 track by $index

  <tr ng-repeat="(name, insts) in items track by $index"
      ng-show="([name] | filter:query).length > 0">
    <td>{{ name }}</td>
    <td ng-repeat="inst in insts track by $index">
      <input type="checkbox" ng-model="inst.isSelected">
    </td>
    <td><ui-select-all items="insts" prop="isSelected"></ui-select-all></td>
  </tr>