Using AngularJS with MVC SelectList has no value initially selected

Question

I have a class that has an MVC SelectList and an int that indicates the selected value.

public class SampleClass {
      public SelectList ServicesAvailable {get; set;}
      public int ServiceIdSelected {get; set;}

      public SampleClass() {}
}

When you go to the page to edit the item you expect that the item you previously selected is selected to begin with. Using razor @Html.DropDownListFor(...) this works absolutely fine. However, this page is using Angular and so I am using:

<select style="width:40%;" chosen data-placeholder="Select a method" 
     no-results-text="'No service found'" ng-model="ServiceIdSelected" 
     ng-options="item.Value as item.Text for item in ServicesAvailable">
        <option value=""></option>
</select>

Using this Angular annotation the initial item is never selected. I can only think that this is because the Value and Text properties of the MVC SelectList are both strings and that Angular is doing something like ServiceIdSelected === item.Value in the background and since one is a string and the other an int it is always false.

Has anyone else run into this issue? If so, how did you get around it? Is my only option to change the SelectList property to a List<> of something??

stackg91 · Accepted Answer · 2015-04-16 06:28:42Z

0

You could checkout this fiddle maybe this helps you.

<select 
            ng-model="Choice.SelectedOption"                 
            ng-options="choice.Name for choice in Choice.Options track by choice.ID"></select>

Fiddle for select

Cheers Christopher,

answered Apr 16, 2015 at 6:28

stackg91

5948 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Nyx Over a year ago

Hmm, so rather than using an integer in the model I could use an object . So to map back to the view model on post it would have to be a SelectListItem instead.

Nyx Over a year ago

So, what I did instead was use a string for ServiceIdSelected as there is a unique string property on a Service. Saves trying to post an extra object and keeps it simple.

Collectives™ on Stack Overflow

Using AngularJS with MVC SelectList has no value initially selected

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related