Форматирование 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

Как сделать так, чтобы мои данные отображались правильно (т. Е. Убедиться, что все данные из набора 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>

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

— 27.10.2018 13:43

angularjs html

27.10.2018 07:46

Знаете ли вы, что директивы являются одной из самых мощных и универсальных функций Angular?

Директивы позволяют расширять HTML новыми элементами и атрибутами и даже создавать собственные структурные директивы для манипулирования DOM. С...

Разница между Angular и React

React и AngularJS - это два самых популярных фреймворка для веб-разработки. Оба фреймворка имеют свои уникальные особенности и преимущества, которые...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Как я сказал в комментарии, это потому, что, когда столбец не помещается в той же строке, он переходит к следующему. Что вы можете сделать, так это создать еще один 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>

27.10.2018 14:10

Другие вопросы по теме

JS извлекает отфильтрованные данные в скрипте таблицы Google

Размещение случайных изображений из каталога jquery

Генерировать ссылку поиска Google для каждого слова из элемента

Центрируйте <h1> с помощью {display: inlineblock;}

Получить значение динамической таблицы при нажатии кнопки

Как сделать ajax-вызов образца структуры json с циклом и поместить в переменную

Возникли проблемы с заголовком PHPMailer (Расположение: thankyou.php)

Создание многостраничного сайта без загрузки

Как подогнать фоновое видео ко всем размерам экрана

Получить элемент DOM с class = "B" внутри элемента с class = "A"

Форматирование HTML div не приводит к желаемому результату

Ответы 1

Другие вопросы по теме

Похожие вопросы