Mapping Objekte in angularJS ui.select mit "track by"

Question

Ich möchte angle-ui ui.select verwenden, um eine multiple dropdown field zu füllen. Ich mag die ausgewählten Objekte in das ng-Modell zu übergeben und habe es auf meine Optionen abgebildet, Objekte der gleichen Struktur enthalten, aber nicht aus der gleichen Quelle:

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

Die trainings Liste von ng-repeat mit einem Beispiel Ausbildung sieht wie folgt aus:

[{"description": "", 
    "skills": [{"type": "tech", 
       "name": "C", 
       "id": 194}], 
    "id": 1, 
    "name": "Test"}] 

Meine skills Liste von ui-select-choices enthält die gleiche Datenstruktur wie in training.skills:

[{"type": "tech", 
    "name": "C#", 
    "id": 194}, 
{"type": "tech", 
    "name": "Java", 
    "id": 197}, 
...] 

Leider funktioniert das nicht. Das ui-select leert meine training.skills und zeigt mir ein leeres Auswahlfeld. Ich verstehe, dass angularjs diese Objekte nicht abbilden kann, wenn sie nicht das gleiche Array wie in this blogpost angegeben haben. Er schlägt vor, track by mit ui.select die Eigenschaft zu sagen, verwenden, um die zwei Listen von Objekten auf der Karte, aber wenn ich die ui-select-choices Linie zu ändern:

<ui-select-choices group-by="skillTypeGrp" repeat="skill.id as skill in skills track by skill.id | filter: $select.search"> 

ändert sich nichts. Gibt es irgendeine Möglichkeit, dies zu erreichen, ohne meine Objekte durch ihre IDs zu ersetzen, wie die suggeriert?

Answer 1

Wenn ich nicht falsch liege, versuchst du das ganze Objekt mit seiner ID zu vergleichen.

Versuchen Sie zu verwenden:

<ui-select-choices group-by="skillTypeGrp" repeat="skill in skills | filter: $select.search"> 
    <span>{{skill.name}}</span> 
</ui-select-choices> 

Hinweis I "skill.id" von Wiederholungs entfernt. Ich denke auf diese Weise sollten Sie die Objekte vergleichen und hoffentlich wird es funktionieren.

Ansonsten würde ich die ui-select-Auswahl so lassen, wie Sie sie haben und in der ui-select ein Array von IDs (die ausgewählten Trainings) übergeben, um der Liste zu entsprechen. Natürlich würde dies mehr Code von Ihrer Seite erfordern, um das Skill-Array bei jeder Änderung zu aktualisieren.

Ich hoffe, es hilft.

Answer 2

Sie müssen filter und track by umkehren, damit es funktioniert:

<ui-select-choices group-by="skillTypeGrp" repeat="skill in skills | filter: $select.search track by skill.id"> 

Es sieht seltsam aus, aber hat den Trick für mich ..

Answer 3

Wenn Sie beziehen sich die bei https://docs.angularjs.org/api/ng/directive/ngRepeat gegebenen Dokumentation die track by muss immer der letzte Ausdruck sein.

So, wie madc vorgeschlagen, wenn Sie ändern:

<ui-select-choices group-by="skillTypeGrp" repeat="skill in skills | filter: $select.search track by skill.id"> 

Es würde funktionieren.

Unten finden Sie in der Dokumentation Ausschnitt, indem sie der letzte Ausdruck über Spur sagt: