CODEWITHSUNDEEP
htmlangularjs
Istiak Mahmood
Istiak Mahmood

Reputation: 2422

AngularJS Table is not working as in should

AngularJs table is not working as expected.

I am trying to show the values of "sets" where it contains 10 values. So what is want to do is that i want to create 10 rows, where it will show "set number" 1 to 10.

But it is displaying all the 10 values in a single rows, how i can make it 10 rows !!

<table st-table="rowCollection" class="table table-striped">
    <thead>
        <tr>    
            <th>Sets Number</th>
            <th>Score of Sets 1</th>
            <th>Score of Sets 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            {% for x in sets %}<td>{{ x }}</td>{% endfor %}
            <td><input type="text"></td>
            <td><input type="text"></td>

        </tr>
    </tbody>
</table>

Which is looking like so --

enter image description here

Upvotes: 1

Views: 60

Answers (1)

rpirsc13
rpirsc13

Reputation: 443

You need to use the ng-repeat directive provided in angular as follows

<tr data-ng-repeat="x in sets">
     <td> {{ x }} </td>
     <td><input type="text"></td>
     <td><input type="text"></td>
</tr>

You can follow the example on http://www.w3schools.com/angular/tryit.asp?filename=try_ng_repeat_array

DEMO: http://plnkr.co/edit/NHfCZ7FgcKGCNpIQVpfU?p=preview

Upvotes: 1

Related Questions