AngularJs and ASP.NET MVC 5 - ng-model overriding SELECT selected OPTION

Question

Following on from my previous question here:

AngularJs and ASP.NET MVC 5 - ng-model overriding textbox value

I am now having the same problem with a SELECT.

I have a form built using ASP.NET MVC 5 using @Html.EnumDropDownListFor to populate the form with my model (e.g, after a form navigation or server side validation failure).

I have now introduced a client side function using Angular (1.4.7) which means the SELECT is now decorated with ng-model to enable the Angular function to use the selected value.

e.g.:

@Html.EnumDropDownListFor(m => m.MyEnum, 
                          new { @class="form-control", ng_model="obj.myEnum" })

Adding the ng-model now overrides the selected option set from the MVC model when the page is reloaded.

Viewing the source in the browser shows that the selected option is set correctly from the MVC model but there is an extra option which is being selected:

<select class="form-control ng-pristine ng-valid ng-touched" 
        name="MyEnum" ng-model="obj.myEnum">
    <option value="? undefined:undefined ?"></option>
    <option value="0">Please select</option>
    <option selected="selected" value="1">Option1</option>
    <option value="2">Option2</option>
</select>

How can I prevent this so that Option1 stays selected?

Using the directive from my previous question does not work as a SELECT does not have a value attribute.

The ng_init also does not work on a SELECT

just saw a question on this a couple days ago. the answer was to use ng-init. ill see if I can find the link — Matt Bodily
– Matt Bodily, Commented Nov 9, 2015 at 14:12
that was my question, the one I linked to in this question! :) I tried ng-init, it doesn't work on a SELECT — Shevek
– Shevek, Commented Nov 9, 2015 at 14:42
sorry about that. I didn't see your link and didn't see ng-init in the code that you had shown so was hoping that would work for you :) — Matt Bodily
– Matt Bodily, Commented Nov 9, 2015 at 16:19

tasseKATT · Accepted Answer · 2015-11-09 19:25:01Z

5

Here is a directive that should help in your case:

app.directive('initSelect', ['$parse', function($parse) {
  return {
    link: function(scope, element, attrs) {

      var select = element[0];

      if (!select.options.length || !attrs.ngModel) return;

      var initialValue = select.options[select.selectedIndex].value;

      $parse(attrs.ngModel).assign(scope, initialValue);
    }
  }
}]);

It will first retrieve the value of the selected option, in your case "1". It will then use the $parse service to set the correct ngModel value.

After this the select should render correctly.

Demo: http://plnkr.co/edit/2VvkGfsPW94SPSVW6iUN?p=preview

answered Nov 9, 2015 at 19:25

tasseKATT

38.5k8 gold badges87 silver badges67 bronze badges

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

2 Comments

Shevek Over a year ago

Awesome! thanks I changed it slightly and named it just 'select' so it will work on any select in my controller without having to add init-select to each one.

tasseKATT Over a year ago

You're welcome :) Yes, I should've just named it select too, good catch :)

Collectives™ on Stack Overflow

AngularJs and ASP.NET MVC 5 - ng-model overriding SELECT selected OPTION

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related