ng-repeat内部ng-repeat与td对应每个项目 - 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>

有关更多信息,请参阅ngRepeat文档的特殊重复开始和结束点部分:

要重复一系列元素而不仅仅是一个父元素,ngRepeat(以及其他ng指令)支持通过分别使用ng-repeat-start和ng-repeat-end定义显式的起点和终点来扩展转发器的范围. .ng-repeat-start指令与ng-repeat的作用相同,但会重复所有HTML代码(包括它定义的标记),包括放置ng-repeat-end的结束HTML标记.