Javascript ng-repeat 中的 ng-repeat 和每个项目的 td - AngularJS

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/29621914/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-23 03:40:22  来源:igfitidea点击:

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

javascriptangularjsangularjs-ng-repeathtml-table

提问by kumareloaded

This code gives me a table with the elements in a single column.

此代码为我提供了一个表格,其中包含单列中的元素。

Here data will be like this

这里的数据会是这样的

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>

This gives me a table with three column. Like

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

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

Along with this I want the table with item.idin one column :in one column and item.valuein one column for better readability and not in a single column.

除此之外,我希望表格item.id在一列:中的一列和item.value一列中,以获得更好的可读性,而不是在单列中。

Tried to do that but am not able to get it working, can someone help me with this?

尝试这样做,但无法使其正常工作,有人可以帮助我吗?

回答by Timothée Jeannin

You should define your table this way:

你应该这样定义你的表:

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

For more information see the Special repeat start and end pointssection of the ngRepeat documentation:

有关更多信息,请参阅ngRepeat 文档特殊重复起点和终点部分

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.

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