HTML div格式不产生所需的输出
HTML div格式不产生所需的输出
提问于 2018-10-27 05:46:59
我有两个包含两组数据的数组，我希望以以下格式在单独的列中显示每组数据：
Set1 Set 2
1 ABC
2 DEF
GEF
3 HIJ
JKL
4 MNO
PQR相反，我的数据如下：
Set 1 Set 2
1 ABC
2 DEF
GEF 3
HIJ
JKL 4
MNO
PQR如何使用标记使数据正确显示(即确保Set 2中的所有数据都在右列中)，将"class= col-xs-4“分配给第一组，将”class=-xs-8“分配给第二组？下面是我现在的代码：
<div ng-switch="hoursOfOp[0]">
<div ng-switch-when = "Not available"><class="col-xs-4 align-right">{{hoursOfOp[0]}}</div>
<div ng-switch-default>
<div ng-repeat="hours in hoursOfOp">
<div class="col-xs-4 align-left">{{hours.day}}</div>
<div class="col-xs-8 align-left no-padding" ng-repeat="time in hours.time">{{time}}</div>
</div>
</div>
</div>回答 1
Stack Overflow用户
回答已采纳
发布于 2018-10-27 12:10:38
正如我在评论中所说的，这是因为当一个col不适合在同一行时，它会转到下一个行。您可以做的是在div中使用col-xs-8创建另一个div，并将ng-重复放在那里，作为列表或什么的。
记住，ng-重复重复输入的元素。因此，在您的例子中，流程如下：
- 创建具有第一行值1的col 4。
- 创建具有第一行ABC值的col 8，因为有空格。
- 创建具有下一行2值的col 4，因为上面没有空格。
- 创建具有DEF值的col 8，因为其中有空格。
- 在下一行上使用值创建col 8，因为上面没有空格。
- 从现在起，一切都变得一团糟。
下面的示例正在工作:)
var app = angular.module("myApp", []);
app.controller('testCtrl', ['$scope', function ($scope) {
$scope.hoursOfOp = [
{id: 1, time: ["ABC"]},
{id: 2, time: ["DEF", "GEF"]},
{id: 3, time: ["HIJ", "JKL"]},
{id: 4, time: ["MNO", "PQR"]}]
}]);<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" integrity="sha384-3ceskX3iaEnIogmQchP8opvBy3Mi7Ce34nWjpBIwVTHfGYWQS9jwHDVRnpKKHJg7" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js" integrity="sha384-XTs3FgkjiBgo8qjEjBk0tGmf3wPrWtA6coPfQDfFEY8AnYJwjalXCiosYRBIBZX8" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js" integrity="sha384-BLiI7JTZm+JWlgKa0M0kGRpJbF2J8q+qreVrKBC47e3K6BW78kGLrCkeRX6I9RoK" crossorigin="anonymous"></script>
<div ng-app="myApp">
<div ng-controller="testCtrl">
<div ng-repeat="hours in hoursOfOp" class="row">
<div class="col-xs-4 col-md-4 stuff">{{ hours.id }}</div>
<div class="col-xs-8 col-md-8 stuff">
<div ng-repeat="v in hours.time">
{{ v }}
</div>
</div>
</div>
</div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/53019097
复制相关文章
相似问题
腾讯云开发者
