I want to use angular-ui's ui.select
to populate a multiple dropdown field
. I'd like to pass the selected objects to the ng-model and have it mapped to my options, containing objects of the same structure, but not from the same source:
<div ng-repeat="training in trainings">
<form class="form-horizontal" role="form">
<ui-select multiple ng-model="training.skills" theme="select2" ng-disabled="disabled">
<ui-select-match placeholder="Wähle Skills...">{{$item.name}}</ui-select-match>
<ui-select-choices group-by="skillTypeGrp" repeat="skill.id as skill in skills | filter: $select.search">
<span>{{skill.name}}</span>
</ui-select-choices>
</ui-select>
</form>
</div>
The trainings
list from ng-repeat
with an example training looks like this:
[{"description": "",
"skills": [{"type": "tech",
"name": "C",
"id": 194}],
"id": 1,
"name": "Test"}]
My skills
list from ui-select-choices
contains the same data structure as in training.skills
:
[{"type": "tech",
"name": "C#",
"id": 194},
{"type": "tech",
"name": "Java",
"id": 197},
...]
Unfortunatly this doesn't work. The ui-select empties my training.skills
, showing me an blank select field. I understand that angularjs is not able to map those objects, if they do not origin the same array, like stated in this blogpost. It suggests using track by
to tell ui.select
which property to use to map the two lists of objects, but if i change the ui-select-choices
line to:
<ui-select-choices group-by="skillTypeGrp" repeat="skill.id as skill in skills track by skill.id | filter: $select.search">
nothing changes. Is there any possibility to get this running without replacing my objects by their ids like the single property binding example suggests?