Alexei Alexei - 5 months ago 46
AngularJS Question

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

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!

Answer

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">