AngularJS - 如何在不同容器中使用ng-repeat

Question

我正在尝试使用ng-repeat来显示数组数字。如果我希望它显示在不同的容器中，例如在不同的ul中，应该如何实现？而且，每个ul最多只能包含2个li。

$scope.numbers = [1,2,3,4,5]

<div ng-controller="myController">
    <ul>
        <li>1</li>
        <li>2</li>
    </ul>
    <ul>
        <li>3</li>
        <li>4</li>
    </ul>
    <ul>
        <li>5</li>
    </ul>
</div>

- teggy

---

我会将您在控制器中的数组转换为[[1,2]，[3,4]，[5]]，然后使用嵌套的ng-repeat进行迭代：<ul ng-repeat="pair in array"><li ng-repeat="number in pair">{{number}}</li></ul>。 - Stewie

Answer 1

你应该将 numbers 数组分成块，然后使用嵌套的 ng-repeat。

JavaScript：

var i, l = $scope.numbers.length;

$scope.chunks = [];

for ( i = 0; i < l; i += 2) {
    $scope.chunks.push( $scope.numbers.slice(i, i + 2) );
}

HTML:

<div ng-controller="myController">
    <ul ng-repeat="chunk in chunks">
        <li ng-repeat="number in chunk">{{ number }}</li>
    </ul>
</div>

---

在这里查看它的实际效果.

- Joseph Silber

---

当你使用动态大小的块时怎么办？我有这个问题，因为我正在使用视口来决定有多少列... - mkornblum

@mkornblum - 然后你只需创建一个大的ul，根据媒体查询给li设置百分比宽度。 - Joseph Silber

这就是我最终做的事情，但一开始我试图在移动到右侧下一列之前将左侧列填充到屏幕高度。我无法想出一种方法来实现这一点... - mkornblum