如何将ng-repeat分成批次 [英] How to split ng-repeat into batches

问题描述

我在 http://getbootstrap.com/javascript/#上执行此ref：checkbox示例buttons-examples

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

现在问题有时是这种类型数组少于5项有时更多。

我如何做这样的事情

ng-repeat在数组的0-4上 - 为这5个项目创建一个按钮组
ng-repeat在数组的5-9上（如果数组长度为> 5）...
ng-repeat在数组的10-14上（如果数组长度大于10）...
...


注意：更好的办法是查看已经使用了多少个字符。每个类型都有不同的名称，有些长一些短，所以有些时候一个真正长的名称可以使用面板的所有宽度。

解决方案

使用 ng-repeat 使用两个 limitTo 负值。

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

演示 http://plnkr.co/edit/8LXXnH?p=preview

更新的示例：

 < li ng-repeat =items 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。

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>

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.

解决方案

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

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

Heres a demo http://plnkr.co/edit/8LXXnH?p=preview

Updated example:

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

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

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