Search code examples
phpangularjslaravel-5.3

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


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>

Solution

  • 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