Angularjs table display

Question

I have data fetched from json and displayed in a table. Im trying to display a header but when i use it displays the data vertically and i want to display it horizontal

Here's my code

<table>
<tr ng-repeat="ninja in ninjass">
<th>
  {{ ninja.name }}
</th>
<td>
  {{ ninja.name }}
</td>
<td>
  {{ ninja.rate }}
</td>
<td>
  {{ ninja.rate }}
</td>
<td>
  {{ ninja.rate }}
</td>
</tr>
</table>

Noisy · Accepted Answer · 2018-09-26 07:14:45Z

1

    <table>
        <th ng-repeat="ninja in ninjclass">
             {{ ninja.name }}
        </th>
        <tbody>
            <tr ng-repeat="ninja in ninjclass">
                <td>{{ ninja.name }}</td>
                <td>{{ ninja.rate }}</td>
            </tr>
        </tbody>
    </table>

answered Sep 26, 2018 at 7:14

Noisy

243 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Zain Farooq Over a year ago

Some explanation makes your answer better to understand

Stanley Ang Over a year ago

Thanks for the help!

Programnik · Accepted Answer · 2018-09-26 06:56:52Z

1

The html for your table is wrong. It should be of form:

    <table>
        <thead>
          <th>name</th>
          <th>rate</th>
        </thead>
        <tbody>
          <tr ng-repeat="ninja in ninjclass">
              <td>{{ninja.name}}</td>
              <td>{{ninja.rate}}</td>
          </tr>
        </tbody>
   </table>

answered Sep 26, 2018 at 6:56

Programnik

1,5591 gold badge10 silver badges15 bronze badges

1 Comment

Stanley Ang Over a year ago

is it possible to not have static header?

kazz · Accepted Answer · 2018-09-26 07:03:49Z

0

<table>
<tr ng-repeat="ninja in ninjass">
<th>
{{ ninja.name }}
</th>
</tr>

<tr>  <td>{{ ninja.name }}<td> </tr>

<tr>  <td>{{ ninja.name }}<td> </tr>

<tr>  <td>{{ ninja.rate }}<td> </tr>

<tr>  <td>{{ ninja.rate }}<td> </tr>

<tr>  <td>{{ ninja.rate }}<td> </tr>
</table>

answered Sep 26, 2018 at 7:03

kazz

31 bronze badge

Collectives™ on Stack Overflow

Angularjs table display

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related