javascript - angularjs table : tr with category using ng-repeat with list - Stack Overflow

admin管理员组

文章数量:1394213

Given the following model :

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

I'd like to create this table :

<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>

How would you do it using angularjs instructions ?

Given the following model :

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

I'd like to create this table :

<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>

How would you do it using angularjs instructions ?

• javascript
• angularjs
• html-table
• angularjs-ng-repeat

Share Improve this question Follow edited Jun 20, 2017 at 15:44 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Jan 15, 2014 at 10:05 QuentinQuentin 3,31044 gold badges2525 silver badges3636 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

Nested repeats and the new ng-repeat-start/ng-repeat-end and remembering that it is OK for a <table> to have many bodies and heads:

<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>

Relevant fiddle: http://jsfiddle/kGZt8/

Documentation: ngRepeat

本文标签： javascriptangularjs tabletr with category using ngrepeat with listStack Overflow