显示复杂的 html 表格

Question

我正在使用 Angularjs 和 Twitter 引导程序。我想在 html 表格中显示一个列表。此列表包含项目和相应的子项目。 我要显示的示例：

水果 (3)
苹果
橙色
香蕉

蔬菜 (2)
胡萝卜
土豆

水果 (3) 和蔬菜 (2) 的 CSS 样式与其他元素的 CSS 样式相同但不同。 我想在一个表格中显示它。

我不知道该怎么做（除了创建一个包含显示的确切数据的列表对象，即：[水果（3）、苹果、橙子、香蕉、蔬菜（3）、胡萝卜、土豆])

编辑： 是否可以将一种样式应用于 'Fruits' 和 'Vegetables' ，而将另一种样式应用于它们的子项？

Answer 1

您可以使用包含类别和项目的列表：

(plunkr:http://embed.plnkr.co/so6vrXMsSkoI1o4ncVX1/preview)

关于js：

$scope.categories = [
    { cat: 'Fruits', items: [ 'Apple', 'Orange', 'Banana' ] },
    { cat: 'Vegetables', items: [ 'Carrot', 'Potatoes' ] }
];

以及在 html 上渲染：

<ul>
  <li ng-repeat="c in categories">
    {{c.cat}}
    <ul>
      <li ng-repeat="i in c.items">
        {{i}}
      </li>
    </ul>
  </li>      
</ul>

在 plunkr 上，也有带有

的示例

【讨论】：

• 感谢您的回答，非常有帮助。在表格解决方案中，您知道是否可以为“水果”和“蔬菜”行设置不同的样式？由于它们对应的表包含在同一个

中，我不确定它是否可能。 一个简单的想法是使用 c.cat 作为类别 ul 中的类名，然后设置 ul.Vegetables {background: green} 或其他样式。 就像@alou write，你可以使用类似 和类似 .Fruits li { color: #840; 的样式。 } 将颜色更改为特定类别。