Question

我在http://getbootstrap.com/javascript/#buttons-examples

执行此ref：复选框示例

<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过滤器，带有正＆amp;负值。

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。

Answer 2

您可以预先对它们进行分组，然后只使用嵌套的转发器。

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的内容。

Answer 3

我还没有测试过它，但我想你可以用拼接来硬编码限制：

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

这对于相对较小的阵列来说没什么问题，但我认为预分组是获得更大阵列的方法。

Answer 4

如果您不介意使用库，这正是lodash#chunk所做的。在控制器中执行分块，然后在视图中编写嵌套for循环。

创建一个元素数组，将这些元素拆分为大小的长度。如果无法均匀地分割集合，则最终的块将是剩余的元素。

_.chunk(['a', 'b', 'c', 'd'], 2);
// → [['a', 'b'], ['c', 'd']]

_.chunk(['a', 'b', 'c', 'd'], 3);
// → [['a', 'b', 'c'], ['d']]

如何将ng-repeat分成批次

4 个答案: