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

标签 javascript jquery css angularjs json

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

像这样

enter image description here

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

像这样

enter image description here

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

这是我的代码片段。

<!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 数据的情况下实现这一目标。 提前致谢。

最佳答案

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>

关于javascript - Angular JS ng-repeat以垂直分割格式排列,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41896188/

相关文章:

javascript - 如何在 ClojureScript 浏览器 REPL 中计时函数?

javascript - 按降序对 HTML 表进行排序

jquery - 使用 jquery 随机化布局

javascript - document.click 以删除页面上的类行为不正常

javascript - 如何加载javascript而不影响webview中的baseURL?

javascript - Node.js 中的 HTTP POST 不起作用

html - CSS3 border-radius 裁剪问题

html - float 图像旁边的 table

javascript - 使用 AJAX(无需 jQuery)从 Vimeo channel 获取视频

javascript - url.replace 有多个替换?