Dynamic Select List Default Selected Item - Angular JS

Question

I have the code listed below which works fine, however when i attempt to add ng-model and related ng-change to the select, an empty option is added. I understanding why, it is because on init the selectedOption for ng-model is empty.

What I want to do is set a default value so when I can use ng-change to set options IsSelected value to true when user selects it. I'm just not sure how to go about this, I have no issues doing this when I'm working with a static generated select list, but for some reason I can't figure it out for this dynamic generated list.

Any input is appreciated!

    <div ng-repeat="optionType in productDetailModel.OptionTypes">
         <select name="{{optionType.OptionTypeName}}">
            <option ng-repeat="option in optionType.Options"
             value="{{option.OptionValue}}">{{option.OptionValue}}
            </option>
         </select>
     </div>

Here's plunkr I mocked to give a basic idea of what I have in mind: http://plnkr.co/edit/xBDfc0XzDwsF0mBiFZOv?p=preview

KhainTCore · Accepted Answer · 2015-07-22 17:58:00Z

2

The initial option is blank because the model is initially undefined. As tymeJV said, initializing your scope inside of your .js will define a default value that will be shown as selected initially.

$scope.modelName = $scope.optionType.Options[0];

It might be helpful to use ng-options instead of ng-repeat. One reason why it might be beneficial is that ng-options does not create a child scope (unlike ng-repeat). This could help simplify linking to your model and avoid confusion.

<select name="{{optionType.OptionTypeName}}" ng-model="modelName" ng-options="option for option in optionType.Options"> 
</select>

This article covers the basics of ng-options as well as discusses why it would be used as opposed to ng-repeat.

Hope this helps.

answered Jul 22, 2015 at 17:58

KhainTCore

1161 silver badge4 bronze badges

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

7 Comments

Mike Anderson Over a year ago

Yes agreed, I do use ng-options normally when outputting a select list. But in this case I was unable to get it to work since I am looping through a collection of OptionTypes and then looping thru the list of Options to output each select list option. Have a look a the Plunkr and you'll see what I'm talking about. I tried your example which works, but I am still unsure of how to set the ng-model: plnkr.co/edit/xBDfc0XzDwsF0mBiFZOv?p=preview

KhainTCore Over a year ago

plnkr.co/edit/Y7IpeQVutUl4bPnvZl0A?p=preview This is your plunk. I just forked it. It works with the ng-options instead of ng-repeat. I'm still trying to get the initial value for the model though, sorry.

Mike Anderson Over a year ago

Thanks for looking at that...if you look at my plunkr I added a loop through OptionTypes to try to set the model, I was able to set the last value but not all of them...hmmm

KhainTCore Over a year ago

That is because you have only 1 ng-model (because of the static name in ng-model as ng-repeat creates the selects), and after the first iteration of the loop (the one to set defaults in your app.js), you overwrite the default for the first select with the default for the second select. The way I've gotten around that is to dynamically name your ng-model using an attribute of your object. This will make it so each select will have its own ng-model, not one universal model for all selects.

Mike Anderson Over a year ago

Awesome..can you show me how you did that? I didn't see the change in your plunkr fork

|

tymeJV · Accepted Answer · 2015-07-22 17:35:19Z

1

Use ng-options when using a select!

<select name="{{optionType.OptionTypeName}}" ng-model="someModel" ng-options="option as option for option in optionType.Options>
</select>

And then set the ngModel to the default option you want selected:

$scope.someModel = $scope.optionType.Options[0]

answered Jul 22, 2015 at 17:35

tymeJV

105k14 gold badges165 silver badges158 bronze badges

1 Comment

Mike Anderson Over a year ago

Yes agreed, I do use ng-options normally when outputing a select list. But in this case I was unable to get it to work since I am looping through a collection of OptionTypes and then looping thru the list of Options to output each select list option. Have a look a the Plunkr and you'll see what I'm talking about.

user1438038 · Accepted Answer · 2017-08-10 12:48:26Z

0

There is one directive of select element is ng-init but it call once while first time rendering, but if you change the options dynamically then it will not call again. So for that you need to set the model field with value in scope just below of your new option population logic.

$scope.modelName = $scope.Options[0]; // if array
$scope.modelName = $scope.Options[key]; // if Json Object

edited Aug 10, 2017 at 12:48

user1438038

6,1287 gold badges64 silver badges105 bronze badges

answered Aug 10, 2017 at 12:23

Pravin Abhale

4252 gold badges5 silver badges16 bronze badges

Collectives™ on Stack Overflow

Dynamic Select List Default Selected Item - Angular JS

3 Answers 3

7 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related