如何将ng-repeat拆分成批
我正在做这个ref:checkbox示例在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个项目时，它会以一种丑陋的方式拆分到下一行。
我怎么能做这样的事情呢
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) ...
...注意:更好的方法是查看使用了多少个字符。每种类型都有不同的名称，有些是长的，有些是短的，所以有时一个非常长的名称可能会占用面板的所有宽度。
回答 4
Stack Overflow用户
发布于 2014-03-16 00:18:05
对于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。
Stack Overflow用户
发布于 2014-03-15 21:25:11
您可以预先对它们进行分组，然后使用嵌套的中继器。
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/
更新：
我已经创建了一个updated version of the same fiddle来显示，使用一个小的CSS来截断带有省略号的文本。通过添加title属性，您可以获得默认的工具提示功能，但最好使用Bootstrap Tooltip plugin。
您可能需要创建一个指令或使用类似于Angular Bootstrap的东西。
Stack Overflow用户
发布于 2014-03-15 22:36:14
我还没有测试过它，但我猜你可以直接用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>这对于相对较小的数组来说是很好的，但我认为对于较大的数组来说，预先分组是可行的。
https://stackoverflow.com/questions/22424240
复制相似问题
腾讯云开发者
