DoCow
  1. DoCow
  3. Como fazer uma pré-seleção para uma lista de seleção gerada pelo AngularJS?

Como fazer uma pré-seleção para uma lista de seleção gerada pelo AngularJS?

Isso cria corretamente uma lista de seleção para escolher o capitão da equipe. No entanto, por padrão, uma opção em branco é selecionada. Como podemos pré-selecionar o primeiro jogador da lista? 

  John Bobby

Eu tentei adicionar ng-init="team.captain='0'" mas isso não ajudou.

Atualização Aparentemente isso acontece porque

um valor referenciado por ng-model não existe em um conjunto de opções passado para ng-options.

Fonte: Por que o AngularJS inclui uma opção vazia em select?

No entanto, a questão ainda permanece por que usar o ng-init não funciona?

Veja o que funcionou:

E o que não funcionou: 

 ng-init="team.captain='0'" ng-init="team.captain='John'"

Meu palpite é que o Angular vai além da simples comparação de valores ou labels. Provavelmente compara referências de objects.

Aqui está um método alternativo para inicializar um menu suspenso usando o AngularJS.

(exemplo de trabalho no JS Fiddle: http://jsfiddle.net/galeroy/100ho18L/1/ )

Como @camus já mencionado em um comentário, você precisa definir o modelo para um valor de “label” válido (ou referência), não um valor de índice. Isso é um pouco estranho, já que você pode ver um valor de índice sendo usado no HTML.

Angular define os atributos de valor no HTML da seguinte forma:

  • ao usar array como datasource, será o índice do elemento array em cada iteração;
  • Ao usar o object como fonte de dados, será o nome da propriedade em cada iteração.

Quando um item é selecionado, o Angular procura a input correta na matriz / object com base no índice ou no nome da propriedade.

E sobre ng-selected , como visto neste jsfiddle :

Eu consegui isso usando ng-model e ng-options. Basicamente, seu modelo e ng-options devem estar em sincronia.

Quando meu modelo (projIndustry nesse caso) foi inicializado para algum número, tive que usar ind.ID em ng-options (comparação de ID).
Quando meu modelo foi inicializado para o object, então eu tive que usar ind (object) em ng-options (comparação de objects).
Intereting Posts