Question

我有一个项目列表，我想将每一半项目分成自己的容器。

如何使用ng-repeat完成此操作？

<div>
    <ul>
        <li>Some item</li>
        <li>Some item</li>
        <li>Some item</li>
        <li>Some item</li>
        <li>Some item</li>
        <li>Some item</li>
    </ul>
</div>
<div>
    <ul>
        <li>Some item</li>
        <li>Some item</li>
        <li>Some item</li>
        <li>Some item</li>
        <li>Some item</li>
        <li>Some item</li>
    </ul>
</div>

Answer 1

解决方案1：在集合上调用切片

我们可以在集合上调用slice方法：

<div ng-app="myApp" ng-controller="DemoCtrl" ng-init="half = numbers.length / 2">
    <div>
        <ul>
            <li ng-repeat="number in numbers.slice(0, half)">{{number}}</li>
        </ul>
    </div>
    <div>
        <ul>
            <li ng-repeat="number in numbers.slice(half)">{{number}}</li>
        </ul>
    </div>
</div>

请参阅fiddle

解决方案2：使用limitTo内置过滤器

<div ng-app="myApp" ng-controller="DemoCtrl" ng-init="len = numbers.length">
    <div>
        <ul>
            <li ng-repeat="number in numbers | limitTo: len / 2 + (len % 2)">{{number}}</li>
        </ul>
    </div>
    <div>
        <ul>
            <li ng-repeat="number in numbers | limitTo: - len / 2">{{number}}</li>
        </ul>
    </div>
</div>

我们添加len % 2的事实是处理数组奇怪。

请参阅fiddle

Angular.js：使用ng-repeat创建2个html容器

1 个答案: