如何将ng-repeat分割成批

How to split ng-repeat into batches

本文关键字：分割 ng-repeat      更新时间：2023-09-26

我在http://getbootstrap.com/javascript/#buttons-examples做这个ref:复选框的例子

<div class="btn-group list-group-item-text" data-toggle="buttons">
  <label data-ng-repeat="type in types"
         ng-class="{btn: true, 'btn-primary': true, active: Map[type.id]}">
    <input type="checkbox" ng-model="Map[type.id]">{{type.name}}
  </label>
</div>

现在的问题是这个类型数组有时少于5项有时多于5项。当按钮组有超过5个项目时，它会以一种难看的方式分裂到下一行。

我该怎么做呢

ng-repeat on 0-4 of array - create a button group for these 5 items
ng-repeat on 5-9 of array (if array length is >5) ...
ng-repeat on 10-14 of array (if array length is >10) ...
...

注意:更好的方法是查看使用了多少字符。每种类型都有不同的名称，有些长一些短，所以有时候一个非常长的名称会占用面板的所有宽度。

对于ng-repeat使用两个limitTo滤波器，正极&负值。

http://docs.angularjs.org/api/ng/filter/limitTo

这里有一个演示http://plnkr.co/edit/8LXXnH?p=preview

更新的例子:

<li ng-repeat="item in items | limitTo: 5 | limitTo: -5">{{item}}</li>
<li ng-repeat="item in items | limitTo: 10 | limitTo: -5">{{item}}</li>

第一个ng-repeat将返回数组的0到4，第二个ng-repeat将返回5到9。

你可以预先对它们进行分组，然后使用嵌套的重复器。

var groups = [],
    maxGroupSize = 4,
    groupNum = 0;
groups.push([]);
groupNum = 0;
for (var i = 0; i < types.length; i++) {
  groups[groupNum].push(types[i]);
  if (groups[groupNum].length === maxGroupSize) {
      groups.push([]);
      groupNum++;
  }
}

$scope.groups = groups;

那么你可以使用嵌套的重复器，像这样:

<div data-ng-repeat="group in groups"
   class="btn-group list-group-item-text" data-toggle="buttons">
     <label data-ng-repeat="type in group"
            ng-class="{btn: true, 'btn-primary': true, active: Map[type.id]}">
         <input type="checkbox" ng-model="Map[type.id]">{{type.name}}
     </label>
</div>

下面是jsFiddle演示的一个例子:http://jsfiddle.net/jwcarroll/V8fuy/

更新:

我已经创建了一个更新版本的相同的把戏，以显示使用一个小的CSS截断文本与省略号。通过添加title属性，您可以获得默认的工具提示功能，但最好使用Bootstrap工具提示插件。

你可能需要创建一个指令，或者使用Angular Bootstrap之类的东西。

我还没有测试过，但我猜你可以用splice硬编码限制:

<div data-ng-repeat="group1Item in items.splice(limit1,limit2-limit1)"> ... </div>
<div data-ng-repeat="group2Item in items.splice(limit2,limit3-limit2)"> ... </div>
<div data-ng-repeat="group3Item in items.splice(limit3,limit4-limit3)"> ... </div>

这对于相对较小的数组来说是可以的，但是我认为对于较大的数组来说，预分组是一种方法。

如果您不介意使用库，这正是lodash#chunk所做的。在控制器中进行分块处理，然后在视图中编写嵌套的for循环。

创建一个数组，其中的元素被分成长度为size的组。如果集合不能均匀分割，则最后的块将是剩余的元素。

_.chunk(['a', 'b', 'c', 'd'], 2);
// → [['a', 'b'], ['c', 'd']]
_.chunk(['a', 'b', 'c', 'd'], 3);
// → [['a', 'b', 'c'], ['d']]
相关文章：