AngularJS dynamic select within ng-repeat using ng-options - set default selected option

Question

I want to implement a dynamic sort into a list of items, by allowing the user to define any number of sort properties based on an available list of property names. The code:

JavaScript (controller)

$scope.data.sortInfo = {};
$scope.data.sortInfo.availableProperties = [
    { PropertyName: "ProjectName", PropertyDisplayName: "Name" },
    { PropertyName: "LastUpdateOnAnsiStr", PropertyDisplayName: "Updated" },
    { PropertyName: "LocationsStr", PropertyDisplayName: "Locations" }
];

// array of selected properties to sort by {Name: {property name}, Direction: {0 = ASC / 1 = DESC}, Priority: {index of sort field (auto filled)} }
$scope.data.sortInfo.selectedProperties = [
    { Name: "ProjectName", Direction: 0, Priority: 0 }
];

HTML

<td ng-repeat="currentSelectedProperty in data.sortInfo.selectedProperties track by $index">
     <!-- debug info -->
     {{currentSelectedProperty.Name}} - {{currentSelectedProperty.Direction}} - {{currentSelectedProperty.Priority}}

      <select ng-model="currentSelectedProperty.Name"
              ng-options="item as item.PropertyDisplayName for item in data.sortInfo.availableProperties track by item.PropertyName">
</td>

Doing this, select is correctly displayed and populated, but I have no option selected. I expect to have ProjectName displayed in the drop-down.

Also, changing the value in the select will correctly change displayed information in the debug fields (Name, Direction and Priority), so ng-model seems to work properly.

I have managed to find a workaround by not using ng-options and explictly ng-repeat the options:

<option ng-selected="{{item.PropertyName == currentSelectedProperty.Name}}" 
        ng-repeat="item in data.sortInfo.availableProperties"
        value="{{item.PropertyName}}">
   {{item.PropertyDisplayName}}
</option>

Question: what is wrong with my ng-options approach?

Angular version is 1.4.3.

Thanks!

currentSelectedProperty.Name is 'ProjectName' in both cases. — Alexei - check Codidact
– Alexei - check Codidact, Commented Jun 28, 2016 at 18:59

Suneet Bansal · Accepted Answer · 2016-06-28 16:25:57Z

1

Try below, it should work:

<select ng-model="currentSelectedProperty.Name" ng-init="currentSelectedProperty.Name=data.sortInfo.availableProperties[0]" ng-options="item as item.PropertyDisplayName for item in data.sortInfo.availableProperties track by item.PropertyName">

answered Jun 28, 2016 at 16:25

Suneet Bansal

2,7061 gold badge16 silver badges18 bronze badges

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

2 Comments

Alexei - check Codidact Over a year ago

It worked. Thank you! However, it seems a little weird, since currentSelectedProperty.Name is a string and data.sortInfo.availableProperties[0] is a { PropertyName , PropertyDisplayName } object.

Suneet Bansal Over a year ago

Yes and the reason is: based on your no-options parameters it is clear that item(which is an object) will be the model and item.PropertyDisplayName will be the display value. Now if you have to change the drop down selection then you will have to assign model to the variable which is binded with ng-model. And also in javascript you can reassign any value to any variable. So initially currentSelectedProperty.Name will be string but when you assign it with model then it became an object.

Community · Accepted Answer · 2017-05-23 12:16:09Z

0

Use ng-init or set the default in your controller.

See this previously asked/answered question how to use ng-option to set default value of select element

edited May 23, 2017 at 12:16

CommunityBot

11 silver badge

answered Jun 28, 2016 at 16:21

n daniel

1481 silver badge10 bronze badges

Comments

Alberto · Accepted Answer · 2016-06-28 16:35:27Z

0

Try this,

$scope.data.sortInfo.selectedProperties =   $scope.data.sortInfo.availableProperties[0]

The problem in your code is that you are having different objects for available properties and selectedproperties.

answered Jun 28, 2016 at 16:35

Alberto

1291 silver badge12 bronze badges

Comments

Rahul Arora · Accepted Answer · 2016-06-28 19:55:18Z

0

You can simply do:

<select ng-model="currentSelectedProperty"
              ng-options="item as item.PropertyDisplayName for item in data.sortInfo.availableProperties track by item.PropertyName">

Reason: currentSelectedProperty is an object which can be mapped to item which is also an object. Since object is contained in an array you need to track it by $index.

answered Jun 28, 2016 at 19:55

Rahul Arora

4,5431 gold badge19 silver badges27 bronze badges

Collectives™ on Stack Overflow

AngularJS dynamic select within ng-repeat using ng-options - set default selected option

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related