47

I have a listbox that I am creating with a select, using AngularJS ng-repeat. The listbox is created correctly, and when I select one of the items and click my button, I get to the function and have the information I need.

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 the listbox paints, it has one item at the top that is blank. When I inspect the listbox during a run 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 the ng-repeat. I don't want to see a blank space at the top of the listbox. I realize one option would be to set the first actual option (value="0") as the selected item, but I would rather have no selected items to start.

bmahf
  • 965
  • 2
  • 11
  • 27

3 Answers3

77

Any time you see <option value="?" selected="selected"></option> in the select, it means that your ng-model is set to a value that isn't in the ng-options. So, if you don't want the blank option, you need to make sure item is set to a value in your itemlist. This could be as easy as having the following in your controller:

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

This will give it an inital value, and then angular will update it for you thereafter.

dnc253
  • 39,967
  • 41
  • 141
  • 157
  • 1
    But the user will think he has selected something, but thats not true. If you use default html there is not blank option in a list of options and nothing gets selected if you set size > 1. – Sebastian Jan 30 '15 at 12:12
  • What do you mean by default HTML? – Trevor Jul 09 '15 at 19:43
  • I agree with @Sebastian. Often times you want there to be nothing visible when the page loads, this will make the user thing something is selected by default. – dudewad Jul 23 '15 at 22:03
  • 2
    The original question was how to prevent the blank option from showing up (i.e. selecting something by default), and this answers that question. If you do want the blank option to show by default, then don't set an initial value for your model. – dnc253 Jul 24 '15 at 19:34
  • No the original question still asks "how to get rid of the blank option added by angular". You still don't get rid of the blank option, you just set the model to some value. Which was still not selected by the user. I can't understand why your answer should be correct. Or do you prefer to have a vote down selected by stackoverflow for every user until he select vote up? No you don't... – Sebastian Jul 27 '15 at 08:09
  • @Sebastian I'm sorry, but I don't understand what you're wanting here. You can either select an option by default or you can show a blank option by default. I don't see there being any other option there. If you want to select an option by default, set the model appropriately. If you want to show the blank option by default, don't set the model. – dnc253 Jul 27 '15 at 16:25
  • Just read what I wrote... Set the size of the select to value e.g. 2 and you will see a blank option at the first place, that is added by angular. If you look a html website with a select without using angular, you will never have a blank option. That's what bmahf wrote. Look: https://output.jsbin.com/tezunataze/1 no blank option... – Sebastian Jul 28 '15 at 12:58
  • @Sebastian Ok, I see what you're saying with selects that have the size attribute set the something greater than 1. That's obviously the part I was missing. My answer definitely applies to selects of size 1 (even if the original question didn't). As for what to do with selects of size greater than 1, I don't know. Sounds like an issue that could be logged with Angular. – dnc253 Jul 28 '15 at 15:52
  • That's it :-)! To be clear: I never said your answer is incorrect for the solution you describe (I have it also used in my projects - unfortunately...). – Sebastian Jul 29 '15 at 05:52
10

simplest way to make sure that automatically added option by angular is hidden is ng-if directive.

<select ng-options="option.id as option.description for option in Options">
    <option value="" ng-if="false"></option>
</select>
Ionut Brihacel
  • 117
  • 1
  • 2
1

I have found the solution after a long RND Please find the following code it 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);
            });

});

Sapnandu
  • 620
  • 7
  • 9