ng-repeat内部ng-repeat与td对应每个项目 - AngularJS

时间:2015-04-14 07:52:48

标签: javascript angularjs angularjs-ng-repeat html-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>

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

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

除此之外,我希望在一列中item.id列中的:表和一列中的item.value表,以提高可读性,而不是在一列中。

试图这样做,但我无法让它发挥作用,有人可以帮助我吗?

1 个答案:

答案 0 :(得分:28)

你应该这样定义你的表:

<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

  

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