Angular:为什么CSS理由不适用于ng-repeat？

Question

我想做什么

我试图li在一个ul(证明)中均匀地间隔.当我硬编码时,CSS工作li,但是当我使用时ng-repeat,CSS不再应用.

HTML

<div ng-app="SampleApp">
    <div ng-controller="ListCtrl">
        <ul class="two-column">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>

        <ul class="two-column">
            <li ng-repeat="item in items"></li>
        </ul>
    </div>
</div>

CSS

.two-column {
    text-align: justify;
}

.two-column:after {
    content: '';
    display: inline-block;
    width: 100%;   
}

小提琴

http://jsfiddle.net/RyanWalters/M8228/

预期结果

两个列表之间应该有空格li.

实际结果

生成的列表ng-repeat在每个列表之间没有空格li.

为什么会这样？

Answer 1

liAngular的重复不会发出元素之间的空白(理由所必需的).你还必须包装空格,以便重复.你可以这样做:

<span ng-repeat-start="item in items"></span>
    <li></li>
<span ng-repeat-end></span>

http://jsfiddle.net/M8228/1/