AngularJS表不能正常工作

时间:2015-11-08 18:26:19

标签: html angularjs

AngularJs表未按预期工作。

我正在尝试显示“sets”的值,其中包含10个值。 所以我想要创建的是 10行,它将显示“set number”1到10。

但是它在一行中显示所有10个值,我怎么能使它成为10行!!

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

看起来像这样 -

enter image description here

1 个答案:

答案 0 :(得分:1)

您需要使用角度提供的ng-repeat指令,如下所示

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

您可以按照http://www.w3schools.com/angular/tryit.asp?filename=try_ng_repeat_array

上的示例进行操作

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