将屏幕的重复结束更改为屏幕的另一侧

Question

我在div中有一些带有一些数据的ng-repeat。我基本上想要的是将数据输出到屏幕的左侧。到达时，它会移动到屏幕的右侧。屏幕的高度是ng-repeat的长度的结果。 有人可以帮我吗？

  left side of   right side of
   the screen     the screen
 _____________________________
|  ng-repeat    |    data11   |
|    data1      |      .      |
|      .        |      .      |
|      .        |      .      |
|      .        |      .      |
|      .        |      .      |
|      .        |      .      |
|      .        |      .      |
|      .        |      .      |
|      .        |      .      |
|      .        |      .      |
|      .        |      .      |
|    data10     |    data20   |
|_______________|_____________|

Answer 1

假设您有20个数据，从数组中您可以使用函数.length得到长度，因此左侧10个，右侧10个，在Angular JS中填充值通过ng-repeat，您可以使用limitTo填充左侧中的前半部分，如下所示

ng-repeat="val in values|limitTo:ceil(values.length/2)"

这里使用ceil就是这样说，如果你有23个数据，那么就不能得到完美的一半，这样左或右应该累积一个额外的数字，即左边12个，右边11个

limitTo 是Angular JS中的过滤器，用于限制ng-repeat中的数字，语法如下所示

{{ limitTo_expression | limitTo : limit}}

您还希望在限制范围内使用ceil功能，您必须将Math注入scope，

最简单的方法，你可以做到

 $scope.ceil = Math.ceil;

在你的控制器中。 Angular正确执行此操作的方法是创建Math服务

同样在右侧，您可以使用

填写

ng-repeat="val in values|limitTo:-values.length/2"

看一下这个例子

<强> HTML

<强> Working Demo

<div ng-app ng-controller="ArrayController">
    <div class="left">
        <span ng-repeat="val in values|limitTo:ceil(values.length/2)">{{val}}
            <br/>
        </span>
    </div>
    <div class="right">
        <span ng-repeat="val in values|limitTo:-values.length/2">{{val}}
            <br/>
        </span>
    </div>
</div>

<强>脚本

angular.module("app", [])
.controller('ArrayController', function ($scope) {
    $scope.ceil = Math.ceil;
    $scope.values = ['data1', 'data2', 'data3', 'data4',
        'data5', 'data6', 'data7', 'data8',
        'data9', 'data10', 'data11', 'data12',
        'data13', 'data14', 'data15', 'data16',
        'data17', 'data18', 'data19', 'data20'];
});

Answer 2

只需重复第一列中的前半部分数据，其余部分重复第二列。 limitTo过滤器可以为您提供帮助。请注意，它的第二个参数可以是负数。

此外，自从limitTo truncates the number通过后，如果您可能有奇数项目，则需要ceil。

$scope.ceil = Math.ceil;

<ul id="myFirstColumn">
     <li ng-repeat="data in dataList | limitTo:ceil(dataList.length / 2)"></li>
</ul>
<ul id="mySecondColumn">
     <li ng-repeat="data in dataList | limitTo:-dataList.length / 2"></li>
</ul>