How do I pre-select the selected item in a dropdown list? [Angular]

Question

I currently have a service in angular returning me a list of states. The array looks like this:

model.Address.StateList = [
     { Disabled: false,
       Group: null,
       Selected: false,
       Text: "CA",
       Value: "1"
      },
 { Disabled: false,
       Group: null,
       Selected: false,
       Text: "IL",
       Value: "2"
      },
      { Disabled: false,
       Group: null,
       Selected: false,
       Text: "NJ",
       Value: "3"
      }
]

I am also returning from the service the state they actually choose which looks like this:

 model.Address.State = "CA"

I have scoured stackoverflow trying to find a way to make this work but I can't figure out how to pre-select the value in the list.

I have tried this:

<select id="State" ng-model="model.Address.State" ng-change="changeState(model.Address.State)" ng-options="option as option.Text for option in model.Address.StateList track by option.Value"></select>

But that does not pre-select the first item.

The one way I have got it to work is changing ng-model to "selectedItem" and in the controller I wrote:

   $scope.selectedItem = responseModel.Address.StateList[0];

But that only picks the first item.

It seems that the problem is that I have a collection of States but the model I want is just the singular text. And ideally I'd like to set the selected to be added to the model object so when I save I can just pass "model" to my api with all the values I need.

Have you seen these answers? http://stackoverflow.com/questions/17968760/how-to-set-a-selected-option-of-a-dropdown-list-control-using-angular-js — Seano666, Nov 19 '15 at 16:29
@georgeawg your link is to $http but I did check out [the resource](https://docs.angularjs.org/api/ng/directive/ngOptions) before posting — mortey, Nov 19 '15 at 16:56
Maybe [this answer](http://stackoverflow.com/a/17646636/5535245) will help. — georgeawg, Nov 19 '15 at 17:17

Leon Adler · Answer 1 · 2015-11-19T19:16:05.743

1

See this JSFiddle for a possible solution.

I am using a scope variable selectedState there and use it in the ng-model attribute, but you can replace that with model.Address.State if you prefer.

Since you bind model.Address.State with the ngModel directive and use track by option.Value, you can set the value of model.Address.State to the value of the option that you want to set active:

model.Address.State = "1";

If you want to use "CA" instead, you can change your ng-model to a property of the current scope:

<select ng-model="model.Address.State" ng-options="option.Text as option.Text for ... track by Text" ...>

$scope.selectedState = "CA";

edited Nov 19 '15 at 19:16

answered Nov 19 '15 at 16:29

Leon Adler

2,993
1
29
42

That doesn't seem to work for me. I have tried both yours and @foxdonut without luck. I can't seem to get model.Address.State, which is "CA", become the selected value. And when I look at State on change of selected, the value becomes the object – mortey Nov 19 '15 at 18:45
I have created a jsfiddle that demonstrates the behavior you intended: http://jsfiddle.net/pw7a6tyb/1/ – Leon Adler Nov 19 '15 at 19:07

score 1 · Answer 2 · answered Nov 19 '15 at 16:31

1

The value that you want to use for ng-model should match the value that you use in ng-options. For example:

model.Address.State = "CA"; // matches the Text property
<select id="State" ng-model="model.Address.State" ng-options="option.Text for option in model.Address.StateList"></select>

If instead you want to use Value, you need to match them up:

model.Address.State = "1"; // matches the Value property
<select id="State" ng-model="model.Address.State" ng-options="option.Text as option.Value for option in model.Address.StateList"></select>

Hope that helps.

answered Nov 19 '15 at 16:31

foxdonut

7,779
7
34
33

That doesn't seem to be working for me at all. I have this but and model.Address.State when being loaded in is "CA" but nothing is selected. In that ng-change function, I see that model.Address.State is equal to the whole model in State List. Meaning, if I choose IL then model.Address.State equals StateList[1] completely – mortey Nov 19 '15 at 17:08
Just needed `option.Text as option.Text` in my first answer and that is exactly what worked... I wouldn't say this wasn't helpful at all =P – foxdonut Nov 19 '15 at 19:55
I misspoke by saying it wasn't working for me "at all". Thanks for the insight – mortey Nov 19 '15 at 20:53

score 0 · Answer 3 · answered Nov 19 '15 at 19:08

0

I figured it out!

Thanks to the insightful guide written HERE I was able to understand a little more about ng-options and Select in angular.

What ended up being the problem is that I need to specify that the text shown in the dropdown list matches the text in the model. The final code that made it work was:

 <select id="State" ng-model="model.Address.State" ng-options="option.Text as option.Text for option in model.Address.StateList"></select>

answered Nov 19 '15 at 19:08

mortey

179
1
4
15

this is the same as my first answer, just needed `option.Text as option.Text` was close! :) – foxdonut Nov 19 '15 at 19:56

How do I pre-select the selected item in a dropdown list? [Angular]

3 Answers3