CODEWITHSUNDEEP
javascriptangularjs
StevieB
StevieB

Reputation: 6523

Angular JS Multiple Select Options adding extra ? Option

I am populating my multiple select like this :

<select ng-model="myAddress" ng-options="address.addressLines for address in search.result.addresses" >
</select>

And there is 2 items currently. But when I load the page it seems to add an extra blank row as such

<option value="?" selected="selected" label=""></option>

But then when I click on my actual 2 item rows the above error row disappears. Any idea what is causing this ?

Upvotes: 1

Views: 789

Answers (1)

Patrick
Patrick

Reputation: 6948

When the select is initially loaded into the view, the model (myAddress) is not set from the controller. Angular needs a way to represent this, so it adds an empty option to the select box. Once a selection is made, it is populated and gets rid of the empty option because it is not defined in the list that is bound to the select.

If you don't want a blank option to appear, you need to set a valid $scope.myAddress in the controller to be used as the default.

Depending on what you want to accomplish, there are really three options.

  1. You keep it as it works now where an empty option is available before a selection is made.
  2. Set an initial value in the controller so there will be no empty option available.
  3. Always have an empty option available, even if a value has been set to the select.

Example here:

HTML:

<div ng-app="myApp" ng-controller="MainController">
    Select with no value set in controller:<br />
    <select ng-model="select1" ng-options="item.name for item in items">
    </select> {{select1}}
    <br /><br />
        Select with value set in controller:<br />
    <select ng-model="select2" ng-options="item.name for item in items">
    </select> {{select2}}
    <br /><br />
        Select empty option always available (even after selection):<br />
    <select ng-model="select3" ng-options="item.name for item in items">
        <option value=""></option>
    </select> {{select3}}
</div>

Javascript:

angular.module("myApp", [])

.controller("MainController", function ($scope) {
    $scope.items = [
        {id: 1, name: "Item 1"},
        {id: 2, name: "Item 2"},
        {id: 3, name: "Item 3"},
        {id: 4, name: "Item 4"}
    ];

    //initial value for select2
    $scope.select2 = $scope.items[0];    
});

Upvotes: 1

Related Questions