如何拆分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屋!