我需要对传统查看angular js
ng-repeat
的方式做一些修改。我有一个 JSON 数据,其中有 n 个数据(来自服务器的响应。长度不固定)。我需要以拆分格式显示数据。即,响应的前半部分数字位于垂直排列的 div 中,第二组数字位于紧挨着它的另一个 div 中。
像这样
但目前我得到的只是普通的 JSON 重复
像这样
我怎样才能像我需要的那样转换这种格式?
这是我的代码片段。
<!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/