时间戳

首页 > 解决方案 > 如何将表中的行作为具有 ng-repeat 的 html 中的列

html - 如何将表中的行作为具有 ng-repeat 的 html 中的列

问题描述

我想将表格中的行显示为具有 ng-repeat 标记的 HTML 中的列，我尝试搜索它但无法找到解决方案，也尝试对其进行编码，但我无法获得所需的确切输出。有人可以帮我吗。

<table rules="all" data-ng-repeat="(key,value) in form">
    <tr class="text-center text-lg-left gallery-item"
        style="vertical-align: center" id="gallery row clearfix"
        ng-repeat="str in value">
        <td><img class="img-fluid img-thumbnail"
            ng-src="/Controller/download/{{str}}"/></td>
    </tr> 
</table>

以下是（键，值）对中的我的 JSON 数据

{  
   "":[  
      "2019013054322",
      "20190131063859499",
      "20190131063859511",
      "2019013161553",
      "2019013162538",
      "2019013163248"
   ],
   "I am my hero":[  
      "20190130061800460"
   ],
   "Tedfdg":[  
      "20190130081118768",
      "20190130081314380"
   ],
   "sun comments three":[  
      "Three"
   ],
   "sun comments Test":[  
      "One"
   ],
   "one of the latest one":[  
      "201912874625"
   ],
   "Tertrt":[  
      "20190131080119942"
   ],
   "I am my manger":[  
      "20190129052834597",
      "20190129052834625",
      "20190129052834628",
      "20190129052834630",
      "20190129052915579",
      "20190129052915587",
      "20190130061741823",
      "20190130061741831",
      "20190130062308298",
      "20190130062308305",
      "20190130062653408",
      "20190130062653416",
      "2019013062743",
      "201902125337",
      "20190212534",
      "20190232025349962",
      "20190232025350014",
      "20190232025617509",
      "20190232025617542",
      "20190232030653886",
      "20190232030653919",
      "20190232030720976",
      "20190232030720984",
      "20190232030746073",
      "20190232030746081",
      "20190232030804192",
      "20190232030804225",
      "20190232031550444",
      "20190232031550478"
   ],
   "multiple files upload with single":[  
      "20190129050635988"
   ],
   "Hello":[  
      "20190130084750572",
      "20190130084750575",
      "20190130084750577"
   ],
   "Test":[  
      "20190130070301041",
      "20190130083652209",
      "20190130083737844",
      "20190130083737847",
      "2019013053754",
      "2019013054357",
      "20190131081628293",
      "20190131081902827",
      "20190131081902830",
      "20190131082345585",
      "20190131082442954",
      "20190131082442958",
      "20190236085637999",
      "20190236085638003"
   ],
   "sun comments onetest":[  
      "Two"
   ],
   "Image upload test":[  
      "11903810-3"
   ],
   "test example":[  
      "141-19"
   ],
   "Test 2":[  
      "20191982354"
   ],
   "Test 3":[  
      "20190131073832066",
      "20190131073832069",
      "20190131073832071"
   ],
   "one test example":[  
      "11903640-18",
      "11903727-50",
      "20191287436"
   ],
   "Test upload":[  
      "2019199209"
   ],
   "This is a sample text.":[  
      "11903728-20"
   ],
   "Trest":[  
      "20190232033220425",
      "20190232033220428",
      "20190232033318088"
   ],
   "multiple files upload":[  
      "20190129050250458"
   ]
}

标签： htmlangularjs

解决方案

首先，您必须向我们展示您的代码，以便我们找出其中的问题所在。

但是，对于解决方案，这可能会有所帮助：

table {
    display: table;
}
table tr {
    display: table-cell;
}
table tr td {
    display: block;
}


<table border="1">
    <tr>
        <td>row 1, cell 1</td>
        <td>row 2, cell 1</td>
    </tr>
    <tr>
        <td>row 1, cell 2</td>
        <td>row 2, cell 2</td>
    </tr>
</table>

推荐阅读