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

我们可以在集合上调用 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 个容器

Angular.js: Create 2 html containers using ng-repeat

javascript

angularjs

angularjs-ng-repeat