Question

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

水果（3）
苹果
橙色
香蕉

蔬菜（2）
胡萝卜
土豆

Fruits（3）和Vegetables（2）的CSS样式与其他元素的CSS样式相同但不同。我想在一张桌子上显示它。

我不知道怎么做（除了创建一个包含显示的确切数据的列表对象，即：[Fruits（3），Apple，Orange，Banana，Vegetables（3），Carrot，Potatoes ]）

编辑：是否有可能将一种风格应用于“水果”和“蔬菜”，另一种风格应用于它们的子项目？

Answer 1

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

（plunkr：http://embed.plnkr.co/so6vrXMsSkoI1o4ncVX1/preview）

on 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上，示例包含＆lt; table＆gt;太

显示复杂的html表

1 个答案: