ng-repeat inside ng-repeat with td for each item - AngularJS

Question

此代码为我提供了一个 table，其中的元素位于单列中。

这里的数据会是这样

var data = [[{"id":"1","value":"One"},{"id":"2","value":"Two"},{"id":"3","value":"three"}],[{"id":"4","value":"four"},{"id":"5","value":"five"},{"id":"6","value":"six"}],[{"id":"7","value":"seven"},{"id":"8","value":"eigth"},{"id":"9","value":"nine"}]]

<div id="mydiv">
    <table>
       <tr ng-repeat="rows in data">
           <td ng-repeat="item in rows">{{item.id}}:{{item.value}}</td>
        </tr>
    </table>
</div>

这给了我一个包含三列的 table。喜欢

1:One 2:Two 3:three
4:four 5:five 6:six
7:seven . . .

除此之外，我希望 table 与 item.id 在一列中 : 在一列中，item.value 在一列中以获得更好的可读性，而不是在一个单一的列。

尝试过这样做但无法正常工作，有人可以帮我解决这个问题吗？

Answer 1

您应该这样定义 table：

<div id="mydiv">
    <table>
        <tr ng-repeat="rows in data">
            <td ng-repeat-start="item in rows">{{item.id}}</td>
            <td>:</td>
            <td ng-repeat-end>{{item.value}}</td>
        </tr>
    </table>
</div>

有关详细信息，请参阅 Special repeat start and end points section of the ngRepeat documentation：

To repeat a series of elements instead of just one parent element, ngRepeat (as well as other ng directives) supports extending the range of the repeater by defining explicit start and end points by using ng-repeat-start and ng-repeat-end respectively. The ng-repeat-start directive works the same as ng-repeat, but will repeat all the HTML code (including the tag it's defined on) up to and including the ending HTML tag where ng-repeat-end is placed.

ng-repeat inside ng-repeat with td for each item - AngularJS

ng-repeat inside ng-repeat with td for each item - AngularJS

javascript

html-table

angularjs

angularjs-ng-repeat