纯JavaScript中的ng-repeat替代

debugcn 发表于 Dev

普里亚姆米什拉

我需要动态创建引导池，其中包含有关某些已举起的票证的特定信息，例如票证编号，票证状态等。所有这些详细信息应从响应中动态填充。我只能使用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>

E1ad

首先。我强烈建议您使用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创建一个新的数组，在这种情况下为字符串数组。[]。Join（''）将数组连接回单个字符串。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。