将过滤器应用于 ng-repeat 以生成固定列表答案

【问题标题】：applying filter to ng-repeat to produce a fixed-column table将过滤器应用于 ng-repeat 以生成固定列表
【发布时间】：2014-06-19 20:46:36
【问题描述】：

有许多应用于 ng-repeats 的过滤器示例。所有这些示例都假设 ng-repeat 将生成一个列表。有a few examples 介绍了如何将项目列表放入表格中，使每个单元格包含一个项目并且表格具有固定数量的列。

如何结合这些？

【问题讨论】：

标签： angularjs angularjs-ng-repeat

【解决方案1】：

首先，一个应用程序和一个控制器，其中包含项目和表格列数：

var app = angular.module("GridApp", []);
app.controller("GridCtrl", function($scope) {
    $scope.items = ["John", "Jesus", "Bob", "Sandy", "Jonah",
                    "Fry", "Jenny", "Helmuth", "Janus", "Ben" ];
    $scope.ncol = 3;
});

第二个，将角度表达式n转为[0, 1, ..., n-1]的辅助函数：

app.filter('array', function() {
    return function(arrayLength) {
        arrayLength = Math.ceil(arrayLength);
        var arr = new Array(arrayLength);
        for (var i = 0; i < arrayLength; i++) {
            arr[i] = i;
        }
        return arr;
    };
});

第三个也是最后一个，两个嵌套的ng-repeats 覆盖过滤的项目集：

<div>
  <h2>Search</h2>
  <input type="text" ng-model="searchText">
</div>

<div>
  <h2>Items</h2>
  <button ng-click="ncol = ncol + 1">+</button>
  <button ng-click="ncol = ncol - 1">-</button>
  <table>
    <tr ng-repeat="column in ((items | filter:searchText).length/ncol | array)">
      <td ng-repeat="item in (items | filter:searchText).slice(ncol*$index, ncol*$index+ncol)">
        {{item}}
      </td>
    </tr>
  </table>
</div>

【讨论】：