Question

我正在使用AngularJS，HTML和Bootstrap / CSS来制作我的Web应用程序。我正在尝试使用带有<ol>标记的<li ng-repeat …>代码制作有序列表。如果列表中只有一个项目，我想隐藏数字。关于如何处理这个的任何建议？

我的代码：

<ul class="list-group">
    <li class="list-group-item">
        <ol>
            <li ng-repeat="cog in cogs.Cognitivediagnosis">{{cog}}&nbsp;</li>
        </ol>
    </li>
</ul>

Answer 1

当列表中只有一个项目时，添加一个ngClass的类，例如ol--no-number：

.ol--no-number {
    list-style-type: none;
}

<ol ng-class="{'ol--no-number': cogs.Cognitivediagnosis.length == 1}">
    <li ng-repeat="cog in cogs.Cognitivediagnosis">{{cog}}&nbsp;</li>
</ol>

Answer 2

你可以像这样对CSS进行破解：

ol li:last-child {
    list-style:none;
}

ol li + li {
    list-style: inherit!important;
}

Fiddle

如果有一个项目有ng-repeat，如何隐藏编号

2 个答案: