在Javascript中使用Foreach循环与Laravel 5.3

Question

我想要添加一个新的项目行：

这是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);
    });
});