使用ng-repeat在<ol>中使用<h3>

Question

<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>

这是在屏幕上呈现的方式：

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

但根据HTML标准，ol应仅包含li，而不是h3。

知道如何实现这个目标吗？

Answer 1

为什么不将这个结构包裹在一个块中呢？在这种情况下放置h3标记就足够了。

<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>

在其他情况下，如果您想要创建列表列表，并且您真的想要使用<ol>，那么您可以采用下一种方式：

<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>

通过这种方式，您可以使用嵌套列表，但所有h3标记都位于li标记内，而不是直接位于ol内。那样就好。 HTML语法规则允许li元素中的标题标记。我宁愿使用第一个变体，因为它看起来更清晰，更容易理解。 但根据W3 validator：

，第二个也是一个有效的HTML结构

Answer 2

在li标签内使用div

如下：

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