How to hide numbering when there's one item with ng-repeat

Question

I'm using AngularJS, HTML, and Bootstrap/CSS to make my web application. I am trying to make an ordered list using the <ol> tag with a <li ng-repeat …> tag. I want to hide the numbers if there's only one item in the list. Any suggestions on how to approach this?

A snipet of my code:

<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

Add a class with ngClass , for instance ol--no-number , when there is only one item in the list:

.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

You could do a hack with CSS like this:

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

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

Fiddle