Faça um select em 1 minuto com angular ❤

Sempre passamos pela mesma situação, que é o select ficar com o campo em branco, nos levando a quebrar a cabeça e acredita, isso é relativamente simples.

A primeira coisa que precisamos fazer é: entender o padrão do array que iremos utilizar no select.

O exemplo acima, da linha 4 até a 8, temos a estrutura do array. Cada objeto é composto por dois campos (name e id), é essa a estrutura que vamos seguir.

Na linha 10, adicionamos um objeto na primeira posição do array, com a função unshift, se fosse para adicionar na ultima posição do array, iriamos usar o push.

Na linha 12, iremos atribuir ao $scope.data o primeiro item do array, que é o objeto que acabamos de adicionar. Isso faz com que o angular entenda que será renderizado o primeiro item do array no select.

Dentro da nossa controller, temos nosso select para criar os options, ao invés de usar o ng-repeat, será usado o ng-options. O ng-model será o cara que vai setar e receber as alterações quando selecionarmos outro item do select.

Dentro do ng-options, o primeiro “opt” é um ponteiro para o array itens, ele representa cada item do select (opt in itens). O “as opt.name” diz que será exibido o campo name no select, quando selecionar, vai alterar o “data”, conforme acima.

Para ver um uso completo, criei um exemplo de cadastro com form.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.