使用Foreach循環中的Javascript Laravel 5.3

Question

我想打一個butoon添加新項行：

這是create.blade.php的HTML

  <div class="createOrderForm" id="orderMenuItems"> 

       <div class="orderItem"> 

        <label> Item : </label> 
        <select name="item[]" required> 

         <option value="">Menu Items</option> 

         @foreach ($menuItems as $item) 
         <option value="{{$item->id}}">{{$item->name}}</option> 
         @endforeach 

        </select> 

        <label>Quantity :</label> 

        <input type="text" name="quantity[]" value="" required> 

       </div> 

      </div> 

和這是包括的create.js：

$(document).ready(function() { 
console.log("Welcome To create order Page"); 


var addItem = $('#addItem'); 
var orderMenuItems = $('#orderMenuItems'); 



$(addItem).click(function(e){ 

    var newItem = '<div class="orderItem">'; 

    newItem += '<label> Item : </label>'; 

    newItem += '<select name="orderItem[]">'; 

    newItem += '<option value="">Menu Items</option>'; 

    newItem += "@foreach ($menuItems as $item)"; 

    var itemID = "{!! $item->id !!}"; 

    newItem += '<option value="'+ itemID +'">'+ itemID +'</option>'; 

    newItem += "@endforeach"; 

    newItem += '</select>'; 

    newItem += '<label>Quantity :</label>'; 

    newItem += '<input type="text" name="quantity[]" value="" required>'; 

    newItem += '</div>'; 

    $(orderMenuItems).append(newItem); 

}); 
}); 

該按鈕的工作原理和增加新的行，但再與新的行中的菜單項的問題：

我認爲這個問題是在這裏：

newItem += "@foreach ($menuItems as $item)"; 

    var itemID = "{!! $item->id !!}"; 

    newItem += '<option value="'+ itemID +'">'+ itemID +'</option>'; 

    newItem += "@endforeach"; 

我試着使用：

@foreach ($menuItems as $item) 
.... 
@endforeach 

而不是：

newItem += "@foreach ($menuItems as $item)"; 
.... 
newItem += "@endforeach"; 

但它不起作用。

我該如何解決？

Answer 1

我沒有laravel的經驗，但我猜測它根本不會感覺對js文件負責。

我不喜歡這種方法，您將標記存儲在兩個地方。一旦在html中，並且一次在JS中的String中。你必須保持這兩個地方同步。

我可以提出一個不同的方法：

在create.blade.php：

<div class="createOrderForm" id="orderMenuItems"> 
    <div class="orderItem"> 

     <label> Item : </label> 
     <select name="item[]" required> 

      <option value="">Menu Items</option> 

      @foreach ($menuItems as $item) 
      <option value="{{$item->id}}">{{$item->name}}</option> 
      @endforeach 

     </select> 

     <label>Quantity :</label> 

     <input type="text" name="quantity[]" value="" required> 

    </div> 
</div> 

模板可以在任何地方的網頁，爲什麼不存儲它旁邊使用它的

和create.js

$(document).ready(function() { 
    console.log("Welcome To create order Page"); 

    var $addItem = $('#addItem'); 
    var $orderMenuItems = $('#orderMenuItems'); 

    $addItem.click(function(){ 
     var markup = $orderMenuItems.children('.orderItem')[0].outerHTML; 
     $orderMenuItems.append(markup); 
    }); 
});