Javascript 垂直分割格式的角度JS ng重复排列

我需要对传统的查看角度js的方式进行一些修改。我有一个JSON数据，其中有n个数据（来自服务器的响应。长度不是固定的）。我需要以拆分格式显示数据。i、 e，响应的前半个数字将位于垂直排列的div中，第二个数字将位于紧挨着该div的另一个div中

像这样

但目前我得到的和往常一样

像这样

我怎样才能像我所需要的那样转换这种格式

这是我的代码片段

.集装箱{
宽度：500px；
边框：1px纯红；
浮动：左；
}
.项目{
宽度：50%；
浮动：左；
填充：5px0；
}
{{data.data}
var-app=angular.module（“myApp”，[]）；
app.controller（“myCtrl”，函数（$scope）{
$scope.records=[{“数据”：“数据1”}，{“数据”：“数据2”}，{“数据”：“数据3”}，{“数据”：“数据4”}，
{“数据”：“数据5”}，{“数据”：“数据6”}，{“数据”：“数据7”}，{“数据”：“数据8”}，
{“数据”：“数据9”}，{“数据”：“数据10”}]；
});

有效，但我不确定它有多实用

<div style="float:left">
    <div class="numberDiv" ng-repeat="num in data" ng-if="$index < data.length / 2">{{num}}</div>
</div>
<div style="float:left">
    <div class="numberDiv" ng-repeat="num in data" ng-if="$index >= data.length / 2">{{num}}</div>
</div>

{{num}}
{{num}}

您可以这样做

1） 初始化一个变量，该变量将是记录总长度的一半

<div class="container" ng-init="halfLength=records.length/2">

2） 现在在ng repeat中，只需输入一个if语句，判断当前索引是否小于总记录的一半， 并打印当前索引和当前索引+半长的记录

 <div ng-repeat="data in records" ng-if="$index<halfLength">
      <div class="item">
          {{data.Data}}
      </div>
      <div class="item">
          {{records[halfLength + $index].Data}}
      </div>
   </div>

{{data.data}
{{记录[half length+$index].Data}

整例

<div class="container" ng-init="halfLength=records.length/2">
   <div ng-repeat="data in records" ng-if="$index<halfLength">
      <div class="item">
          {{data.Data}}
      </div>
      <div class="item">
          {{records[halfLength + $index].Data}}
      </div>
   </div>
</div>
<script>
    var app = angular.module("myApp", []);
    app.controller("myCtrl", function ($scope) {
        $scope.records = [{"Data": "Data1"}, {"Data": "Data2"}, {"Data": "Data3"}, {"Data": "Data4"}, 
                          {"Data": "Data5"}, {"Data": "Data6"}, {"Data": "Data7"}, {"Data": "Data8"}, 
                          {"Data": "Data9"}, {"Data": "Data10"}];
    });
</script>

{{data.data}
{{记录[half length+$index].Data}
var-app=angular.module（“myApp”，[]）；
app.controller（“myCtrl”，函数（$scope）{
$scope.records=[{“数据”：“数据1”}，{“数据”：“数据2”}，{“数据”：“数据3”}，{“数据”：“数据4”}，
{“数据”：“数据5”}，{“数据”：“数据6”}，{“数据”：“数据7”}，{“数据”：“数据8”}，
{“数据”：“数据9”}，{“数据”：“数据10”}]；
});

---

工作示例

您可以执行以下操作：

<div ng-init="offset = 3">
    <div class="left">
        <div ng-repeat="data in records | limitTo:offset">
            ...
        </div>
    </div>
    <div class="right">
        <div ng-repeat="data in records | limitTo:(offset-list.length)">
            ...
        </div>
    </div>
</div>

...
...

如果您只支持现代浏览器，则可以使用flexbox使用CSS实现这一点

var-app=angular.module（“myApp”，[]）；
app.controller（“myCtrl”，函数（$scope）{
$scope.records=[{“数据”：“数据1”}，{“数据”：“数据2”}，{“数据”：“数据3”}，{“数据”：“数据4”}，
{“数据”：“数据5”}，{“数据”：“数据6”}，{“数据”：“数据7”}，{“数据”：“数据8”}，
{“数据”：“数据9”}，{“数据”：“数据10”}]；
});
.container{
宽度：300px；
显示：-webkit flex；
显示器：flex；
-webkit flex流：列换行；
柔性流：柱包裹；
高度：10公分；
边框：1px实心；
背景：#CCC；
}
.项目{
宽度：50%；
背景：红色；
边框：2件纯蓝；
填充：5px0；
}

{{data.data}
css显示：网格怎么样


angular.module（'test'，[]）.controller（'testCtrl'，function（$scope）{
$scope.data=[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30]
})
.wrapper{
显示：网格；
网格模板列：60px 60px 60px 60px 60px；
网格模板行：60px 60px 60px 60px 60px；
网格自动流：列；
}
.项目{
填充：10px；
保证金：5px；
边框：1px实心；
}

{{num}}
感谢您提供的解决方案。在这里做了一些修改之后，我创建了我的确切需求。您还可以将数据“划分”到两个单独的数组中，以使模板保持更简单，从而省去了使用索引检查的每个ng if的需要。你可以做两次单独的ng重复。