Question

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

喜欢这个

但目前我得到的就像通常的JSON重复一样

像这样

如何转换此格式就像我需要的那样？

这是我的代码段。

＆＃13;

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

＆＃13;

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

Answer 1

这有效，但我不确定它有多实用：https://plnkr.co/edit/mAFRjwxBfqd0Hq8nShBk?p=preview

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

Answer 2

你可以这样做

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>

整个例子

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

Answer 3

如果您只支持现代浏览器，则可以使用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>

Answer 4

您可以这样做：

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

Answer 5

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

Angular JS ng-repeat以垂直分割格式排列

5 个答案: