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

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

本文关键字：创建 2个 html 容器 repeat ng js 使用 Angular      更新时间：2023-09-26

我有一个项目列表，我想在它自己的容器中拆分每一半项目。

如何使用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>

解决方案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是为了处理数组的奇性。

请参阅fiddle

相关文章：