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

Question

My code:

<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>

The product group select basically filters the next select; products.

I keep getting this empty option value included at the bottom of my product select options, like so:

<option value=""></option>

I've already used <option style="display: none" value="">Choose product</option> to remove the first empty option value in my product select.

Update:

Use ng-options instead of ng-repeat, like so:

<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>

Just check by a if statement before outputting the ` – Matt Backslash Dec 02 '16 at 09:39 — Matt Backslash, Dec 02 '16 at 09:39

score 0 · Accepted Answer · edited May 23 '17 at 12:30

0

i would say your ng-repeat is in the wrong place, probably should use the standard angular way (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>
then if you want to remove the empty/first element, have a look at this Angular JS Remove Blank option from Select Option

edited May 23 '17 at 12:30

Community

1
1

answered Dec 02 '16 at 09:50

joe

1,359
14
19

Does this only count for the product select? – Dec 02 '16 at 09:53
it should generate a – joe Dec 02 '16 at 09:55
I'm talking about the second select; the select were I choose products. – Dec 02 '16 at 09:58

score 0 · Answer 2 · answered Dec 02 '16 at 09:53

You should check if the data isn't empty, for example:

<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>

But I think you should try to find where this empty line come from to avoid further problems

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

2 Answers2