Question

假设我从api获取信息并将其显示在我的html视图列表中，但是每个值都在一个框内。

每个例子：

    <ul ng-repeat="list on lists" class="inline">
        <li>One</li>
        <li>Two</li>
        <li>Three</li>
        <li>Four</li>
        <li>Five</li>
    </ul>

关于CSS：

li {
    height: 100px;
    width: 100px;
    border: 1px solid red;
}

我想要做的是在两个值之间添加一个自动断行。无论值的数量，每两条记录我需要一条断行来得到这样的东西：

<ul ng-repeat="list on lists">
            <li>One</li>
            <li>Two</li>
            <br>
            <li>Three</li>
            <li>Four</li>
            <br>
            <li>Five</li>
        </ul>

我该怎么做？我尝试使用white-space但没有成功。此外，我尝试用bootstrap卡限制空间，它有点工作，但第三个（和下一个框）的标题与前两个的页脚保持非常接近。

我正在使用AngularJs和Javascript。

希望你能帮助我。

Answer 1

听起来你应该使用2的模数=== 0.为.break创建一个类并添加适当的类以使其中断。您可能不想使用ul您可能希望使用:after选择器添加具有display:block; content:""属性的div。如果您执行<li>路线，则inline-block代码应为ul。

<ul ng-repeat="list on lists" class="inline">
    <li ng-class="{'break': $index % 2 === 0 }">{{ list.key}}</li>
</ul>

Answer 2

在$index标记上使用ng-if角度变量和<li>，如下所示：

    <ul ng-repeat="item in data">
        <li ng-if="$index !== 0 && $index % 2 === 0">&nbsp;</li>
        <li>{{item}}</li>
    </ul>

正如在一些评论中指出的那样，MDN只允许列表中的嵌套列表，而不是技术<br>。

fiddle

列表上的自动断行

2 个答案: