javascript - angularjs 表 : tr with category using ng-repeat with list

标签 javascript angularjs html-table angularjs-ng-repeat

给定以下模型:

[{categoryName: "category1", items:[{name:"item1.1"}{name:"item1.2"},...]}, 
 {categoryName: "category2", items:[{name:"item2.1"},...]},...]

我想创建这个表:

<table>
  <tr>
    <th>category1</th>
  </tr>
  <tr>
    <td>item1.1</td>
  </tr>
  <tr>
    <td>item1.2</td>
  </tr>
  ...
  <tr>
    <th>category2</th>
  </tr>
  <tr>
    <td>item2.1</td>
  </tr>
  ...
 </table>

你会如何使用 angularjs 指令来完成它?

最佳答案

嵌套重复和新的 ng-repeat-start/ng-repeat-end 记住 <table> 没问题有很多 body 和头:

<table>
    <thead ng-repeat-start="x in data">
        <tr><th>{{x.categoryName}}</th></tr>
    </thead>
    <tbody ng-repeat-end>
        <tr ng-repeat="y in x.items">
            <td>{{y.name}}</td>
        </tr>
    </tbody>
</table>

相关 fiddle :http://jsfiddle.net/kGZt8/

文档:ngRepeat

关于javascript - angularjs 表 : tr with category using ng-repeat with list,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21134384/

相关文章:

javascript - Angularjs ui-router抽象状态不调用 Controller

angularjs - Bower 安装卡在 json 输出 : "message": "Answer",

HTML 电子邮件列宽随不同的电子邮件客户端而变化

javascript - 仅使用 json 数据集中数组中的一些值填充选择下拉列表

javascript - jQuery 输入值变化检测

javascript - 在 ng-repeat 中填充下拉值

javascript - 如果从javascript中删除元素,如何在angularjs中手动销毁范围?

javascript - AngularJS 错误 : [$injector:itkn] Incorrect injection token! 预期的服务名称为字符串,未定义

css - 如何使表格单元格动画在悬停时延伸

javascript - 删除选定的行 - Struts2