Angular.js：使用ng-repeat創建2個html容器

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>

見小提琴

---

解決方案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的事實是為了處理數組奇數。

見小提琴