javascript - 如何将 ng-repeat 分成批处理

Question

我在 http://getbootstrap.com/javascript/#buttons-examples 做这个 ref:checkbox 例子

<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 个元素时，按钮组会以丑陋的方式拆分到下一行。

我怎样才能做这样的事情

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

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

Answer 1

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。