Angular Select dropdown set selected value

Question

<select ng-if="PF_Set.PF.length > 0">
   <option ng-if="PF_Set.showPleaseSelect && PF_Set.PF.length>1">Please Select</option>
   <option ng-repeat="PF in PF_Set.PF" ng-click="doSomething()">{{::PF.SelectedDisplayValue}}</option>
</select>

The list has values like SelectedDisplayValue and isSelected. Only one item in the list will have isSelected=true. Can I have this as the selected value in the dropdown?

Updated - still with issues

<select ng-model="PF_set.PF" ng-attr-id="{{item.Index + '_' + PF_set.Type}}" ng-if="PF_set.PF.length > 0 >                                                                       
   <option ng-selected="PF.isSelected" ng-repeat="PF in PF_set.PF">{{PF.isSelected}} : {{::PF.SelectedDisplayValue}}</option>
</select>

Updated - 1 minor issue remaining, need to add "please select" to top of list if none selected

removed the ng-model. This must have caused a lot of confusion with the ng-repeat

<select ng-attr-id="{{item.Index + '_' + PF_set.Type}}" ng-if="PF_set.PF.length > 0 >                                                                       
   <option ng-selected="PF.isSelected" ng-repeat="PF in PF_set.PF">{{PF.isSelected}} : {{::PF.SelectedDisplayValue}}</option>
</select>

looks like angularjs to me, please check your question tag, currently you have tagged angular, which refers to Angular 2+ — AVJT82
– AVJT82, Commented Oct 4, 2017 at 9:09

Sniipe · Accepted Answer · 2017-10-04 11:15:02Z

1

You can use ng-selected directive: example

<option ng-repeat="PF in PF_Set.PF" 
  ng-selected="PF.isSelected">
{{PF.SelectedDisplayValue}}
</option>

edited Oct 4, 2017 at 11:15

Sniipe

1,3263 gold badges18 silver badges30 bronze badges

answered Oct 4, 2017 at 9:45

Danylo Gudz

2,6761 gold badge20 silver badges19 bronze badges

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

2 Comments

Sniipe Over a year ago

I'm having issues with my code - I've updated the question 1) What I see is that my first value is blank, whereas yours has a value. 2) The isSelected only seems to work in the first dropdown. The other ones are coming up as blank. 3) When I select a value I get an error: "Error: [ngRepeat:dupes] Duplicates in a repeater are not allowed."

Sniipe Over a year ago

I added ng-model on the select. When I removed it I fixed issues. I now have to add a "please select" value to the top of the list if none are selected.

Collectives™ on Stack Overflow

Angular Select dropdown set selected value

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