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>

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

1 个答案: