CSS 格式不缩进 ng 重复输出的第二行

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

可以使用一些帮助来确定我在布局部分上做错了什么，这阻止了我获得所需的结果。这是我的索引中的代码.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(和材料(使用行/列类型布局，这使得实现您所追求的目标更容易且响应迅速。当您需要偏移时间时，您只需使用ng-class添加一个offset类。就个人而言，我发现这种方法比在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样式实现条件格式。更多信息在这里