Mapeando objetos em angularJS ui.select usando “track by”

9

Eu quero usar o ui.select do angular-ui para preencher um multiple dropdown field . Gostaria de passar os objetos selecionados para o ng-model e tê-lo mapeado para minhas opções, contendo objetos da mesma estrutura, mas não da mesma fonte:

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

A lista trainings de ng-repeat com um exemplo de treinamento é assim:

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

Minha lista skills de ui-select-choices contém a mesma estrutura de dados de training.skills :

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

Infelizmente isso não funciona. O ui-select esvazia meu training.skills , mostrando um campo de seleção em branco. Eu entendo que o angularjs não é capaz de mapear esses objetos, se eles não originam o mesmo array, como declarado em esta postagem do blog . Ele sugere o uso de track by para informar a ui.select qual propriedade usar para mapear as duas listas de objetos, mas se eu alterar a linha ui-select-choices para:

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

nada muda. Existe alguma possibilidade de fazer isso funcionar sem substituir meus objetos por seus IDs, como o exemplo de ligação de propriedade única sugere?

    
por vnoec 25.11.2014 в 11:05
fonte

3 respostas

2

Você precisa reverter filter e track by para que funcione:

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

Parece estranho, mas foi o truque para mim ..

    
por madc 08.07.2015 / 10:58
fonte
0

Se eu não estiver errado, você está tentando comparar o objeto inteiro com seu id.

Você tentou usar:

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

Repare que removi "skill.id" da repetição. Acho que desta forma você deve comparar os objetos e esperamos que funcione.

Caso contrário, eu deixaria as opções ui-select como você tem e, no ui-select, passa uma matriz de IDs (os treinamentos selecionados) para corresponder à lista. É claro que isso implicaria mais codificação do seu lado para atualizar o array de habilidades toda vez que ocorrer uma mudança.

Espero que ajude.

    
por Tamy 29.04.2015 / 16:13
fonte
0

Se você indicar a documentação fornecida no link o track by deve ser sempre a última expressão.

Então, como sugerido por madc, se você mudar para:

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

Funcionaria.

Abaixo está o snippet de documentação que diz sobre a faixa, sendo a última expressão:

    
por Himanshu Arora 05.09.2015 / 19:57
fonte