如何拆分NG-重复成批 [英] how to split ng-repeat into batches

问题描述

我这样做参考：例如复选框在 http://getbootstrap.com/javascript/#buttons -examples

I am doing this ref:checkbox example at http://getbootstrap.com/javascript/#buttons-examples

<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个项目的下一行。

Now the problem is sometimes this types array has less than 5 items sometimes more. The button group splits in an ugly way onto the next line when it has more than 5 items.

我怎样才能做这样的事情。

How can I do something like this

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

请注意：这将是更好的是，看看有多少个字符已被使用。每个类型都有不同的名称，有的长有的短，所以有时一个很长的名字最多可以使用面板的所有宽度

note:what would be even better is to see how many characters have been used. Every type has different name, some long some short, so some times a really long name can use up all the width of the panel

推荐答案

通过 NG-重复使用两个 limitTo 过滤器，以积极和放大器;负值。

With ng-repeat use two limitTo filters, with positive & negative values.

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重复将返回0到数组4，第二次NG重复将返回5〜9。

The first ng-repeat will return 0 to 4 of array, second ng-repeat will return 5 to 9.

这篇关于如何拆分NG-重复成批的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！