Форматирование CSS не делает отступ во второй строке вывода ng-repeat

Question

Попытка получить следующий формат для вывода из скрипта: Дни работы:

                Sunday:     Closed
                Monday:     8am - 9am
                            9am - 10am
                Tuesday:    8am - 9am
                            9am - 12pm
                Wednesday:  8am - 9am
                Thursday:   9am - 10am
                            11am - 12pm

… и так далее. Вместо этого вывод заканчивается так:

Days of operation:  
                    Sunday:     Closed 
                    Monday:     8am - 9am  
                    9am - 10am
                    Tuesday:    8am - 9am
                    9am - 12pm
                    Wednesday:  8am - 9am
                    Thursday:   9am - 10am
                    11am - 12pm

Можно использовать некоторую помощь, чтобы выяснить, что я делаю неправильно с частью макета, которая мешает мне получить желаемый результат. Вот код, который у меня есть в моем index.css для форматирования:

#details label{
  width: 240px;
}
#details .hours-layout{
    float: left;
    width: 100px
}
.label-left {
  float: left;
}
.content-right {
  display: block;
  overflow: hidden;
}

Вот код из моего html-скрипта:

<div role="tabpanel" class="tab-pane fade" id="details">
                    <div class="content">
                      <div><label class="label-left">{{listing_ctrl.COMMON.facilityType}}:</label><span class="content-right">{{ listing_ctrl.listing.program }}</span></div>
                      <div><label class="label-left">{{listing_ctrl.COMMON.facilityOpened}}:</label><span class="content-right">{{ listing_ctrl.listing.dateFounded ? (listing_ctrl.listing.dateFounded | date:'MM/dd/yyyy':'+0') : "Not Available" }}</span></div>
                      <div><label class="label-left">{{listing_ctrl.COMMON.capacity}}:</label><span class="content-right">{{ listing_ctrl.listing.capacity }}</span></div>
<!--New lines v2-->
                      <div ng-switch="listing.rawData.opHoursAvailable">
                            <div ng-switch-when = "N"><label class="label-lelft">{{listing_ctrl.COMMON.hoursOfOp}}:</label><class="content-right">Not available</div>
                            <div ng-switch-default>
                                <p><label class="label-left">{{listing_ctrl.COMMON.hoursOfOp}}:</label><span class="content-right">
                                        <span ng-if="listing_ctrl.listing.operatingHours">
                                            <span ng-repeat="day in listing.operatingHours">
                                                <span class="hours-layout">{{day.day}}:</span>
                                                    <span ng-repeat="sched in day.sched">
                                                        <span ng-switch = "sched.open">
                                                            <span ng-switch-when = "">
                                                                Closed <br/>
                                                            </span>
                                                            <span ng-switch-default class="hours-layout2">
                                                                {{sched.open}} - {{sched.close}}<br/>
                                                            </span>
                                                        </span>
                                                    </span>
                                                </span>
                                            </span>
                                        </span>
                                </p>
                            </div>
                        </div>

Answer 1

Вы можете использовать интерполяцию в атрибуте style, чтобы установить маржу для второго (и третьего, четвертого ...) элементов в вашем ng-repeat.Соединение частей из комментариев и ответов здесь - ваше рабочее решение.Причина, по которой вы должны использовать <div> вместо <span>, заключается в том, что теги <span> не могут использовать настройки поля или высоты style.Лично я всегда предпочитаю использовать <div> элементы для позиционирования.Обычно я использую <span> вместе с ng-if для отображения условного текста или для применения шрифта / стилей текста к слову или двум в более длинной строке текста.

<div ng-repeat="sched in day.sched">
   <div ng-switch = "sched.open">
          <div ng-switch-when = "">
                Closed
          </div>
          <div ng-switch-default style="{{ $index > 0 ? 'margin-left : 100 px' : '' }}">
               {{sched.open}} - {{sched.close}}
          </div>
    </div>
</div>

Причина, по которой я спросил о Bootstrapпотому что это становится немного чище, когда вы используете структуру макета.Bootsrap (и материал) используют макеты типа строки / столбца, что делает достижение того, что вам нужно, проще и быстрее.Когда вам нужно сместить ваши часы, вы просто добавляете класс offset, используя ng-class.Лично я считаю, что этот подход намного чище, чем использование интерполяции в атрибуте style.

<div class="row" ng-repeat="sched in day.sched">
   <div ng-switch = "sched.open">
          <div class="col-xs-6" ng-switch-when = "">
                Closed
          </div>
          <div class="col-xs-6" ng-switch-default ng-class="{'col-xs-offset-6': $index > 0}">
               {{sched.open}} - {{sched.close}}
          </div>
    </div>
</div>

Answer 2

что-то вроде следующего должно помочь вам.

<span ng-repeat="sched in day.sched">
   <span ng-switch = "sched.open">
          <span ng-switch-when = "">
                Closed <br/>
          </span>
          <span ng-switch-default class="hours-layout2" ng-style="$index > 1 && margin-left : 100 px">
               {{sched.open}} - {{sched.close}}<br/>
          </span>
    </span>
</span>

Объяснение: вы можете добиться условного форматирования, используя стиль ng.Подробнее здесь