如何在Angular的ng-repeat循环中实现有序列表格式化？

你的问题出在HTML结构不符合语义规范，以及ng-repeat的应用位置不对，导致每个姓名和年龄都被渲染成了独立的列表项。咱们一步步来修正：

问题根源 #

你把ng-repeat放在了<div>上，然后在<div>里面放了两个独立的<li>——但<li>必须是<ul>、<ol>这类列表容器的直接子元素，浏览器会自动修正这个错误，把每个<li>都当成单独的列表项，所以才会出现分散的项目符号。

解决方案：匹配你期望的格式 #

要实现1) • Name : John • Age : 24这种效果，我们可以用有序列表（<ol>）生成序号，然后把每个用户的姓名和年龄放在同一个<li>里，用•分隔：

<ol>
  <li ng-repeat="namep in names">
    • Name : <span ng-bind="namep.name"></span> • Age : <span ng-bind="namep.age"></span>
  </li>
</ol>

如果觉得ng-bind写起来麻烦，也可以用Angular的插值表达式{{}}简化（效果完全一致）：

<ol>
  <li ng-repeat="namep in names">
    • Name : {{namep.name}} • Age : {{namep.age}}
  </li>
</ol>

另一种可选格式（子列表项） #

如果希望姓名和年龄是独立的项目符号，但归属同一个序号项，可以用嵌套列表，再通过样式让子项在同一行显示：

<ol>
  <li ng-repeat="namep in names">
    <ul style="display: inline; list-style-type: disc; padding-left: 1em;">
      <li style="display: inline; margin-right: 1em;">Name : {{namep.name}}</li>
      <li style="display: inline;">Age : {{namep.age}}</li>
    </ul>
  </li>
</ol>

这样渲染出来的效果就完全符合你的需求啦！

内容的提问来源于stack exchange，提问作者theTechApprentice