AngularJS - added an additional empty parameter using ng-repeat in the select tag

Question

I have a list that I create with select using AngularJS ng-repeat. The list will be created correctly, and when I select one of the elements and press the button, I will go to the function and will have the necessary information.

My html code is as follows:

<select size="6" ng-model="item" ng-options="s.name for s in itemlist"></select> <button class="btn tt-btn-blue" ng-model="singleModel" ng-click="onLoadClicked(item.id)">Load</button> 

My problem is that when drawing a list, there is one element at the top that is empty. When I check the list at runtime in Chrome, I get the following output in the console:

 <select size="6" ng-model="item" ng-options="s.name for s in itemlist" class="ng-pristine ng-valid"> <option value="?" selected="selected"></option> <option value="0">Item 1</option> <option value="1">Item 2</option> <option value="2">Item 3</option> <option value="3">Item 4</option> <option value="4">Item 5</option> <option value="5">Item 6</option> </select> 

I am wondering how I can get rid of the first option inserted by ng-repeat. I do not want to see an empty space at the top of the list. I understand that one option would be to set the first actual parameter (value = "0") as the selected item, but I would prefer that there are no selected items to run.

Answer 1

Whenever you see <option value="?" selected="selected"></option> <option value="?" selected="selected"></option> in the selection, this means that your ng-model set to a value that is not in ng-options . So, if you do not want an empty option, you need to make sure that item set to itemlist . It can be as simple as having the following in your controller:

 $scope.item = $scope.itemlist[0]; 

This will give it the actual value and then angular will update it for you after that.

Answer 2

The easiest way to make sure the automatically added angular option is hidden is with the ng-if directive.

 <select ng-options="option.id as option.description for option in Options"> <option value="" ng-if="false"></option> </select> 

Answer 3

I found a solution after a long RND. Please find the following code that will work for you.

Here is the HTML code

 <div class="col-xs-3" ng-controller="GetUserADDetails"> <label>Region</label> <select id="DDLRegion" ng-model="selectedregion" class="form-control" ng-change="getBranched(selectedregion)"> <option value="" >--Select Region--</option> <option ng-repeat="region in Regions" value="{{region.LookupID}}">{{region.LookupValue}}</option> </select> </div> 

Here is the module code

 var app = angular.module("UserMasterModel", []) .controller("GetUserADDetails", function ($scope, $http,$log) { $http({ method: 'GET', url: '/UserMaster/GetAllRegion' }) .then(function (response) { $scope.Regions = response.data; //$log.info(response); }); 

});