删除 select 底部的空对象值（由 ng-repeat 触发）

Question

我的代码：

<div class="form-group">
    <label>Productgroup</label>
    <select id="product_group_id" name="product_group_id" class="form-control" ng-model="productGroup" ng-change="changedType(val)"> 
            <option style="display: none" value="">Choose a productgroup</option>
        @foreach ($product_groups as $product_group)
            <option value="{{$product_group->id}}">{{$product_group->name}}</option>
        @endforeach
    </select>
</div>

<div class="form-group">
    <label>Product</label>
    <select id="product_id" name="product_id" class="form-control" ng-model="form.product_id">
        <option style="display: none" value="">Choose a product</option>                        
            <option value="@{{product.id}}" ng-repeat="product in products">@{{product.name}}<option>
    </select>
</div>

产品组select基本过滤下select；产品。

我的产品 select 选项底部一直包含这个空选项值，如下所示：

<option value=""></option>

我已经使用 <option style="display: none" value="">Choose product</option> 删除了我的产品 select 中的第一个空选项值。

更新：

使用 ng-options 而不是 ng-repeat，像这样：

<div class="form-group">
    <label>Product</label>
    <select id="product_id" name="product_id" class="form-control" ng-options="product.id as product.name for product in products" ng-model="form.product_id">
        <option style="display: none" value="">Choose a product</option>
    </select>
</div>

Answer 1

我会说你的 ng-repeat 在错误的地方，可能应该使用标准的 angular 方式 (https://docs.angularjs.org/api/ng/directive/select):
<select name="mySelect" id="mySelect" ng-options="option.name for option in data.availableOptions track by option.id" ng-model="data.selectedOption"></select>
然后如果你想删除 empty/first 元素，看看这个 Angular JS Remove Blank option from Select Option

Answer 2

您应该检查数据是否不为空，例如：

<select id="product_group_id" name="product_group_id" class="form-control" ng-model="productGroup" ng-change="changedType(val)"> 
        <option style="display: none" value="">Choose a productgroup</option>
    foreach ($product_groups as $product_group)
       if (!empty($product_group->name) && !empty($product_group->id)) {
        <option value="{{$product_group->id}}">{{$product_group->name}}</option>
       }
    endforeach
</select>

但我认为你应该设法找到这个空行的来源以避免进一步的问题

删除 select 底部的空对象值（由 ng-repeat 触发）

Remove the empty object value at the bottom of your select (that gets triggered by ng-repeat)

php

angularjs

laravel-5.3