尝试从脚本中获取以下格式的输出: 营业天数:
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>
最佳答案
您可以在 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(和 Material)使用行/列类型布局,这使得实现您想要的更容易和响应更快。当你需要抵消你的时间时,你只需添加一个 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>
关于html - CSS 格式不缩进 ng-repeat 输出的第二行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52265810/