angularjs - HTML div 格式未产生所需的输出

问题描述

我有两个包含两组数据的数组，我想在单独的列中显示每组，格式如下：

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

标签： angularjshtml

正如我在评论中所说，这是因为当一个 col 不适合同一行时，它会转到下一个。您可以做的是使用 col-xs-8 在 div 中创建另一个 div 并将 ng-repeat 作为列表或其他内容放在那里。

请记住， ng-repeat 重复它放入的元素。因此，在您的情况下，流程如下：

在第一行创建具有 1 值的 col-xs-4
使用第一行的 ABC 值创建 col-xs-8，因为有空间
在下一行创建具有 2 值的 col-xs-4，因为上面没有空间
在同一行上创建具有 DEF 值的 col-xs-8，因为有空间
在 NEXT ROW 上使用 GEF 值创建 col-xs-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>

angularjs - HTML div 格式未产生所需的输出

问题描述

解决方案

推荐阅读