DavidC DavidC - 3 years ago 185
AngularJS Question

Using <h3> within <ol> with ng-repeat

<ol ng-repeat="item in ctrl.items">
<h3 ng-bind-html="item.title"></h3>
<li ng-repeat="description in item.items" ng-bind-html="description"> </li>
</ol>


This is how it is rendered on screen:

**Title1**
1. Desciption1
2. Description2
**Title2**
1. Description1


But as per the HTML standards,
ol
should only contain
li
, not
h3
.

Any idea how we can achieve this?

Answer Source

Why don't you just wrap this construction in one more block? Placing h3 tag in this case will be correct enough.

<div ng-repeat="item in ctrl.items">
    <h3 ng-bind-html="item.title"></h3>
    <ol>
          <li ng-repeat="description in item.items" ng-bind-html="description"></li>
    </ol>
</div>

In other case, if you would like to create list of lists and you really want to use <ol> for both you can do in the next way:

<ol ng-repeat="item in ctrl.items">
    <li>
        <h3 ng-bind-html="item.title"></h3>
        <ol>
            <li ng-repeat="description in item.items" ng-bind-html="description"></li>
        </ol>
    </li>
</ol>

In this way you have nested lists, but all h3 tags are inside the li tag, not inside the oldirectly. That is fine. HTML syntax rules allow headings tags in the li elements. I would prefer to use first variant, because it looks clearer and more understandable. But second one also is a valid HTML structure according to W3 validator:

enter image description here

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download