Angular JS ng-repeat以垂直拆分格式排列答案

【问题标题】：Angular JS ng-repeat arranging in vertical split formatAngular JS ng-repeat以垂直拆分格式排列
【发布时间】：2017-06-13 06:22:47
【问题描述】：

我需要以传统方式查看angular jsng-repeat 进行一些修改。我有一个 JSON 数据，其中有 n 个数据（来自服务器的响应。长度不固定）。我需要以拆分格式显示数据。即，响应的前半部分位于垂直排列的 div 中，第二部分位于紧挨着它的另一个 div 中。

这样

但目前我得到的只是通常的 JSON 重复

喜欢这个

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

这是我的代码 sn-p。

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <style>
        .container {
            width: 500px;
            border: 1px solid red;
            float: left;
        }
        
        .item {
            width: 50%;
            float: left;
            padding: 5px 0;
        }
        
    </style>
<body ng-app="myApp" ng-controller="myCtrl">

    <div class="container">
        <div class="item" ng-repeat="data in records">
            {{data.Data}}
        </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>

</body>

</html>

我希望在不修改我的 JSON 数据的情况下实现这一点。提前致谢。

【问题讨论】：

标签： javascript jquery css angularjs json

【解决方案1】：

This 有效，但我不确定它是否实用。

<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>

【讨论】：

感谢您的解决方案。我在这里做了一些修改后创建了我的确切要求。
您还可以将数据“分区”到两个单独的数组中，以使模板保持更笨拙，从而无需对每个 ng-if 进行索引检查。你可以做两个单独的 ng-repeats。

【解决方案2】：

你可以这样做

1) 初始化一个占记录总长度一半的变量

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

2) 现在在 ng-repeat 中，只要输入一个 if 语句，当前索引是否小于总记录的一半，并打印当前索引和当前索引+halfLength的记录

 <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 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>

工作示例https://jsfiddle.net/o6e58b2y/1/

【讨论】：

【解决方案3】：

你可以这样做：

<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>

【讨论】：

【解决方案4】：

如果您只支持现代浏览器，您可以使用 flexbox 使用 CSS 来做到这一点。

 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"}];
        });

.container {
  width: 300px;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: column wrap;
  flex-flow: column wrap;
  height: 10em;
  border: 1px solid;
  background: #CCC;
}

.item {
  width: 50%;
  background: red;
  border: 2px solid blue;
  padding: 5px 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">

    <div class="container">
        <div class="item" ng-repeat="data in records">
            {{data.Data}}
        </div>
    </div>

</div>

【讨论】：

【解决方案5】：

css display: 网格呢？

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 {
display: grid;
  grid-template-columns: 60px 60px 60px 60px 60px;
  grid-template-rows: 60px 60px 60px 60px 60px;
  grid-auto-flow: column;
}


.item {
  padding:10px;
  margin: 5px;
  border: 1px solid;
}

<!DOCTYPE html>
<html>

<head>
  <script data-require="angular.js@1.6.1" data-semver="1.6.1" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body ng-app="test" ng-controller="testCtrl">
  <div class="wrapper">
    <div class="item" style="width:30px;" class="numberDiv" ng-repeat="num in data" ng-if="$index < data.length">{{num}}</div>
  </div>
</body>

</html>

【讨论】：