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

AngularJS - how to use ng-repeat in different containers

本文关键字：ng-repeat AngularJS      更新时间：2023-09-26

我试图使用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>

您应该将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>

相关文章：