CODEWITHSUNDEEP
javascriptangularjs
mortey
mortey

Reputation: 179

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

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.

Upvotes: 1

Views: 1072

Answers (3)

Leon Adler
Leon Adler

Reputation: 3341

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";

Upvotes: 1

mortey
mortey

Reputation: 179

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>

Upvotes: 0

foxdonut
foxdonut

Reputation: 7947

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.

Upvotes: 1

Related Questions