javascript - AngularJS - 减少 ng-repeats 的数量

Question

我有一个登记册，按字母顺序从 A 到 Z 列出了人...每个人，例如 A 先生，都有一组相应的数据历史。

我有一个带有简单 ng-repeat 的表格，显示 12 个单元格的数据(代表 12 个月)。

如果提供了 12 个月/单元格的数据，我会显示所有数据，如果只提供 5 个月的数据(任何少于 12 个月的数据)，我会调用服务 srvEmptyCells 来计算剩余的单元格并以较深的颜色显示。

问题是，我注意到我正在重复 ng-repeat:

emptyCell in getEmptyCells

考虑到我有超过 100 个用户，很多时候这会影响页面性能。

有没有办法保存每个特定用户的空单元格数量？并消除对额外 ng-repeats 的需要？指令会改善情况吗？

这是一个骗子:http://plnkr.co/edit/2UKDD1fvfYGMjX9oJqVu?p=preview

HTML:

<table ng-repeat="data in myData" class="my-table">
  <caption>
    {{ data.Name }}
  </caption>
  <tbody>
    <tr>
      <th>Rate</th>
      <td ng-repeat="history in data.Histories.slice(0, 12)" class="my-table-cell">
        {{history.Rate}}
      </td>
      <td ng-repeat="emptyCell in getEmptyCells(data.Histories.slice(0, 12).length)" class="empty"></td>
    </tr>
    <tr>
      <th>Effort</th>
      <td ng-repeat="history in data.Histories.slice(0, 12)" class="my-table-cell">
        {{history.Effort}}
      </td>
      <td ng-repeat="emptyCell in getEmptyCells(data.Histories.slice(0, 12).length)" class="empty"></td>
    </tr>
    <tr>
      <th>Advance</th>
      <td ng-repeat="history in data.Histories.slice(0, 12)" class="my-table-cell">
        {{history.Advance}}
      </td>
      <td ng-repeat="emptyCell in getEmptyCells(data.Histories.slice(0, 12).length)" class="empty"></td>
    </tr>
    <tr>
      <th>Previous</th>
      <td ng-repeat="history in data.Histories.slice(0, 12)" class="my-table-cell">
        {{history.Previous}}
      </td>
      <td ng-repeat="emptyCell in getEmptyCells(data.Histories.slice(0, 12).length)" class="empty"></td>
    </tr>
    <tr>
      <th>Current</th>
      <td ng-repeat="history in data.Histories.slice(0, 12)" class="my-table-cell">
        {{history.Current}}
      </td>
      <td ng-repeat="emptyCell in getEmptyCells(data.Histories.slice(0, 12).length)" class="empty"></td>
    </tr>
    <tr>
      <th>Code</th>
      <td ng-repeat="history in data.Histories.slice(0, 12)" class="my-table-cell">
        {{history.Code}}
      </td>
      <td ng-repeat="emptyCell in getEmptyCells(data.Histories.slice(0, 12).length)" class="empty"></td>
    </tr>
  </tbody>
</table>

JS:

app.controller('MainCtrl', function($scope, $http, factoryGetJSONFile, srvEmptyCells) {
  $scope.name = 'World';

  factoryGetJSONFile.getMyData(function(data) {
    $scope.myData = data.MyData.Entries;
  });

  $scope.getEmptyCells = srvEmptyCells.getEmptyCells;

});

app.factory('srvEmptyCells', function() {
    return {
        getEmptyCells: function(len) {
            var emptyCells = [];
            for(var i = 0; i < 12 - len; i++){
                emptyCells.push(i);
            }
            return emptyCells;
        }
     };
 });

Answer 1

您可以通过添加 data.Histories.slice(0, 12) 和 getEmptyCells(data.Histories. slice(0, 12).length) 并使用 ng-repeat 来代替。 这样您就可以避免一遍又一遍地重复这些调用。

如果您可以修改响应，更好的方法是在服务端而不是在客户端执行此操作。如果不需要，为什么要返回超过 12 条历史记录？

很难知道这是否会解决你的性能问题，因为每行有很多 ng-repeats，但至少会比以前更快。

缓存客户端的示例；

factoryGetJSONFile.getMyData(function(data) {
   $scope.myData = data.MyData.Entries;

   for (int i=0; i < $scope.myData.length; i++) {
     var current = $scope.myData[i];
     current.nonEmptyCells = current.Histories.slice(0, 12);
     current.emptyCells =  srvEmptyCells.getEmptyCells(current.nonEmptyCells.length);
   }
});

然后将 html 中的 ng-repeats 更改为:

<td ng-repeat="history in data.nonEmptyCells" class="my-table-cell">

和

<td ng-repeat="emptyCell in data.emptyCells" class="empty"></td>

更新了plunkr:http://plnkr.co/edit/92S2rNNhBEyXZVsCI2M8?p=preview