CODEWITHSUNDEEP
javascripthtmlangularjs
Asher
Asher

Reputation: 15

HTML Select "Selected" attribute not working

I'm generating a list of colors with Angular, using the following code:

<select id="color" ng-model="bgCol">
    <option ng-selected="{{ind == 0}}" ng-repeat="(ind, color) in colors" value="{{ind}}">{{color.name}}</option>
</select>

And "colors" is an array of objects:

colors = [{
    "name":"Red",
    "color":"C00"
}]

But none of the options are being selected, instead an empty option is selected by default, and deleted when the selection is changed

Upvotes: 0

Views: 681

Answers (2)

Saksham
Saksham

Reputation: 9390

There are a few things you should consider

  1. Do not use ng-repeat for adding options to select

  2. In your json, remove quotes from the key. It should be name:"Red" and not "name":"Red".

  3. Add a ng-model attribute to the select tag and declare it to select a default option rather than a blank at page load.

See the code below

<select ng-model="selecteditem" ng-options="color.name as color.color for color in colors"></select>

And declare selecteditem in the controller as

 $scope.selecteditem = $scope.colors[0];

Upvotes: 1

Brett DeWoody
Brett DeWoody

Reputation: 62881

Take a look at the docs for ngOptions where they provide a nearly identical example to what you're trying to accomplish.

Upvotes: 1

Related Questions