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

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>

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

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

javascript

html

angularjs

html-validation