I'm trying to do equal distribution of elements from this question How to distribute li elements equally? I'm using angular with jade:
ul
li(ng-repeat="item in items") {{item.name}}
but ng-repeat don't create newlines after each elements and text-align: justify
don't work. Is it possible to inject newline or space after each li in html returned by ng-repeat?
Use ng-repeat-start
and ng-repeat-end
:
ul
li(ng-repeat-start="step in workflow.data.steps", class="{{step.status|lowercase}}", ng-class="{selected: step.caption == workflow.data.step.caption}")
//ng-style="{width: (100/(workflow.data.steps.length > 6 ? 6 : workflow.data.steps.length)) + '%'}"
div
span.box {{step.caption}}
span.status(ng-show="workflow.data.steps.loaded") {{step.status}}
span.status(ng-hide="workflow.data.steps.loaded") ...
br(ng-repeat-end)
@Fissio solution almost work, I just need to add this css:
br {
display: none;
}
and it work. Plunker
Just add
<li ng-repeat="your code">
<span ng-if="!$first || !$last"><br></span>{{item.name}}
</li>
if it is not a first and last item then it will not add "br" . otherwise it will add a break
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.