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

Question

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

这里的数据会是这样

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>

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

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

除此之外，我还希望表格在一列中包含 item.id : 在一列中，在一列中包含 item.value更好的可读性，而不是在一个单独的列中。

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

Answer 1

你应该这样定义你的表:

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