根据索引对ng-repeat中的项目进行分类

Question

我有一个项目清单items = [1,2,3,4,5,6,7,8, ... ,40]。 我正在使用ng-repeat显示这些项目。

挑战是根据每列的行数在不同的div中显示它们。 它应显示为

1 4 7

2 5 8

3 6 9

等等。 （如果行数为3）

==============

1  5  9

2  6  10

3  7  11

4  8  12

依此类推（如果行数为4）。 每列应该在一个单独的div中

例如：

数据是

scope. allItems = 
[{value = "apple" , id = 1},
{value = "mango" , id = 2},
{value = "banana" , id = 3},
{value = "grapes" , id = 4}]

等到id = 40

我正在使用ng-repeat进行循环

现在所有的成果都来自单一的div

苹果

芒果

香蕉

葡萄

但我想将它分成每个分区5个水果 一个div中的前5个水果，另一个div中的另外5个水果和os。

Answer 1

您可以创建一个过滤器来重新排列列中的项目。

http://jsbin.com/vinohusoba/edit?html,js,output

  <span ng-repeat="item in items | columns:3">
    {{item}}
    <br ng-if="($index+1) % 3 === 0"/>
  </span>

过滤器：

var app = angular.module('app', []);

app.controller('MyController', function($scope) {
  $scope.items = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
});

app.filter('columns', function() {
   return function(items, colCount) {
      var returnItems = [];

      var rows = Math.ceil(items.length / colCount);
      var cols = [];
      var currentCol = [];
      for(var i = 0; i < items.length; i++) {
         currentCol.push(items[i]);

         if((i+1)%rows === 0) {
            cols.push(currentCol);
            currentCol = [];
         }
      }

      for(var i = 0; i < rows; i++) {
         for(var k = 0; k < colCount; k++) {
            returnItems.push(cols[k][i]);
         }
      } 

      return returnItems;
   };
});

如何设计这个样式 - 你必须弄明白这一点。