Question

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

如何将这些结合起来？

Answer 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-repeat：

<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>

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

1 个答案: