Блог

Главная - Вопросы по программированию - альтернатива ng-repeat в обычном javascript

альтернатива ng-repeat в обычном javascript

#javascript

#javascript

Вопрос:

Мне нужно динамически создавать загрузочные колодцы, которые содержат конкретную информацию о каком-либо поднятом билете, например, номер билета, статус билета и т.д. Все эти детали должны динамически заполняться из ответа. Я могу использовать только 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:

Прежде всего. Я настоятельно рекомендую вам использовать map для этого, а не для цикла:

 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(«) объединяют массив обратно в одну строку.