HTML форматирование div не приводит к желаемому выводу

Question

У меня есть два массива с двумя наборами данных, и я хочу отобразить каждый набор в отдельном столбце в следующем формате:

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

Как мне сделать так, чтобы мои данные отображались корректно (т. Е. Чтобы все данные из набора 2 попадали в правый столбец) с помощью тега, присваивая «class = col-xs-4» первому набору и «class = col» -хс-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>

Answer 1

Как я уже сказал в комментарии, это потому, что, когда col не помещается в одну строку, он переходит к следующей.Что вы можете сделать, это сделать еще один div внутри div с помощью col-xs-8 и поместить туда ng-repeat, как список или что-то в этом роде.

Имейте в виду, что ng-repeat повторяет элемент, в который он вставлен. Итак, в вашем случае поток выглядит следующим образом:

• создает col-xs-4 со значением 1 в первой строке

• создает col-xs-8 со значением ABC в первой строке, поскольку имеется пробел

• , создающийcol-xs-4 со значением 2 в следующей строке, потому что нет пробела выше
• создает col-xs-8 со значением DEF в той же строке, так как есть пробел
• создает col-xs-8 со значением GEF в СЛЕДУЮЩЕЙ СТРОКЕ , поскольку с этого момента нет места над
• , все запутано.

Работает приведенный ниже пример:)

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>