Empty row in ng-option still apears in select menu

Question

Hi I have select menu that should not have empty row, this is my code in AngularJS

    $scope.GetAllSnimateljiBaseInfo = function () {

    $http.get(serviceBase + "GetAllSnimateljiBaseInfo", { timeout: 6000 })
    .success(function (response) {
        $scope.snimatelji = response;
        $scope.snimatelji.splice(0, 0, { "IDsnimatelj": 0, "Ime": "", "Prezime": "" });
        $scope.selectedSnimateljInfilterVideoKlip = $scope.snimatelji[0];
    })
     .error(function (response, status) {
         if (status == 401) {
             $state.go('/');

         }
         else {
             alert(response.Message);
         }
     });
};

this is HTML code

        <div class="form-group">
                    <label class="col-lg-3">Snimatelj:</label>
                    <div class="col-lg-9">
                        <select class="form-control" ng-options="column as column.Ime +' '+ column.Prezime for column in snimatelji" ng-model="selectedSnimateljInfilterVideoKlip">
                            <option value=""></option>
                        </select>
                    </div>
                </div>

But select menu looks like this

As you can see I have two empty menu options instead of one ?

Where is my mistake , any help please ?

Regards

you need to use "track by <your id attribute>", because the option comparation doesn't recognize by entire record. If you need more help, you can create a jsbin or plunker to show for us. — Joao Polo

Developer Developer · Accepted Answer · 2016-08-21T17:50:04

By default one empty row will be there for angular select. The additional empty row is because you have specified

<option value=""></option>

in select tag- remove that. If you would like to remove the default empty row as well, then set $scope.selectedSnimateljInfilterVideoKlip = $scope.snimatelji[0] or use ng-init to achieve the same.

Empty row in ng-option still apears in select menu

1 Answers