Mapowanie obiektów w trybie kątowymJS ui.select przy użyciu opcji "ścieżka" "

Question

Chcę użyć funkcji Angular-ui do dodania . Chciałbym przekazać wybrane obiekty do modelu NG-i to odwzorowane na moich opcji, zawierająca obiekty o tej samej strukturze, ale nie z tego samego źródła:

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

Lista z ng-repeattrainings ze związkiem przykładem trening wygląda następująco:

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

Moja lista skills z ui-select-choices zawiera tę samą strukturę danych jak w training.skills:

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

Niestety to nie działa. Ui-select opróżnia mój training.skills, pokazując mi puste pole wyboru. Rozumiem, że angularjs nie jest w stanie odwzorować tych obiektów, jeśli nie pochodzą z tej samej tablicy, jak podano w this blogpost. To sugeruje użycie track by powiedzieć ui.select która to właściwość używać do mapowania dwie listy obiektów, ale jeśli mogę zmienić linię ui-select-choices do:

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

nic się nie zmienia. Czy istnieje możliwość uruchomienia tej operacji bez zastępowania moich obiektów ich identyfikatorami, tak jak sugeruje to single property binding example?

Answer 1

Jeśli się nie mylę, próbujesz porównać cały obiekt z jego identyfikatorem.

Próbowałeś użyć:

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

Wskazówka usunąłem "skill.id" z powtórzeniem. Myślę, że w ten sposób powinieneś porównać obiekty i mam nadzieję, że to zadziała.

W przeciwnym razie zostawiłbym opcje do wybrania opcji-ui, tak jak je posiadasz, a następnie w interfejsie ui-wybierz tablicę identyfikatorów (wybrane szkolenia), aby dopasować listę. Oczywiście oznaczałoby to więcej kodowania z twojej strony, aby zaktualizować tablicę umiejętności za każdym razem, gdy nastąpi zmiana.

Mam nadzieję, że to pomaga.

Answer 2

Trzeba odwrócić filter i track by aby to działało:

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

To wygląda dziwnie, ale wystarczyły dla mnie ..

Answer 3

Jeśli odwołać się do dokumentacji podane na https://docs.angularjs.org/api/ng/directive/ngRepeat track by zawsze musi być ostatnim wyrażeniem.

Tak, jak sugeruje mAdc jeśli zmieni się na:

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

To będzie działać.

Poniżej znajduje się fragment, który mówi o dokumentację toru będąc ostatni wyraz: