纯javascript中的ng-repeat替代
纯javascript中的ng-repeat替代
提问于 2019-04-01 01:52:39
我需要动态创建bootstrap井，其中包含一些提高票证的特定信息，如票号，票证的状态等。所有这些细节都应该从响应中动态填充。我只能使用JavaScript。如何在普通的JavaScript中实现同样的功能？
我已经成功地创建了引导程序井，但是如何使用JavaScript动态填充每个字段的数据呢？
<body>
<div id="table"></div>
<script>
var ticketDetails = [
{status:"pending", App_name:"demo1", req_id:1234, Appr: "no", tct_no: "AB1234"},
{status:"approved", App_name:"demo2", req_id:654, Appr: "yes", tct_no: "AB8769"},
{status:"dispatched", App_name:"demo3", req_id:34, Appr: "yes", tct_no: "AB1241"}
];
var a = '<div class="container">';
a += '<div class="well" style="color:#fff; background-color:pink;"><div class="row">';
a += '<div class="col-xs-6">REQUEST#</div>';
a += '<div class="col-xs-6" style="text-align:right;">STATUS</div>';
a += '</div>';
a += '<div>';
a += '<div class="row">';
a += '<div class="col-xs-4">Approval</div>';
a += '<div class="col-xs-4">Approver Name</div>';
a += '<div class="col-xs-4">Ticket Number</div>';
a += '</div>' + '</div>' + '</div>';
for (var i=0; i<3; i++) {
document.getElementById("table").innerHTML += a;
}
</script>
</body>回答 1
Stack Overflow用户
回答已采纳
发布于 2019-04-01 02:37:51
首先。我强烈建议您使用map，而不是for循环：
const html = ticketDetails.map( item =>{
return `<div class="container">
<div class="well" style="color:#fff; background-color:pink;">
<div class="row">
<div class="col-xs-6">REQUEST#</div>
<div class="col-xs-6" style="text-align:right;">STATUS</div>
</div>
<div class="row">
<div class="col-xs-4">${item['status']}</div>
<div class="col-xs-4">${item['App_name']}</div>
<div class="col-xs-4">${item['tct_no']}</div>
</div>
</div>
</div>` ;
});
document.getElementById("table").innerHTML = html.join('');[].map创建一个新数组，case.And [].Join('')中的字符串数组将数组连接回单个字符串。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55443760
复制相关文章
相似问题