CODEWITHSUNDEEP
javascriptselectangularjs
bmahf
bmahf

Reputation: 975

AngularJS - extra blank option added using ng-repeat in select tag

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.

Upvotes: 47

Views: 48698

Answers (3)

Sapnandu
Sapnandu

Reputation: 642

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);
            });

});

Upvotes: 1

Ionut Brihacel
Ionut Brihacel

Reputation: 117

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>

Upvotes: 10

dnc253
dnc253

Reputation: 40327

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.

Upvotes: 77

Related Questions