ng-options com array simples init


187

Estou um pouco confuso com Angular e ng-options.

Eu tenho uma matriz simples e quero iniciar uma seleção com ele. Mas, eu quero que as opções value = label.

script.js

$scope.options = ['var1', 'var2', 'var3'];

html

<select ng-model="myselect" ng-options="o for o in options"></select>

O que eu ganho:

<option value="0">var1</option>
<option value="1">var2</option>
<option value="2">var3</option>

O que eu quero:

<option value="var1">var1</option>
<option value="var2">var2</option>
<option value="var3">var3</option>

Então eu tentei:

<select ng-model="myselect2" ng-init=0 ng-options="options[k] as v for (k,v) in options"></select>

<select ng-model="myselect3" ng-init=0 ng-options="b as b for b in options"></select>

(Mas não funcionou.)

Editar:

Meu formulário é enviado externamente, e é por isso que preciso de 'var1' como o valor em vez de 0.

Respostas:


304

Você realmente acertou na terceira tentativa.

 <select ng-model="myselect" ng-options="o as o for o in options"></select>

Veja um exemplo de trabalho aqui: http://plnkr.co/edit/xEERH2zDQ5mPXt9qCl6k?p=preview

O truque é que o AngularJS grava as chaves como números de 0 a n de qualquer maneira e é convertido novamente ao atualizar o modelo.

Como resultado, o HTML parecerá incorreto, mas o modelo ainda será definido corretamente ao escolher um valor. (ou seja, o AngularJS converterá '0' de volta para 'var1')

A solução da Epokk também funciona, no entanto, se você estiver carregando dados de forma assíncrona, pode achar que nem sempre é atualizado corretamente. O uso de ngOptions será atualizado corretamente quando o escopo for alterado.


1
Você está fora de tópico. Você não entendeu as instruções. Ele quer valueno dele select.
EpokK 13/08/13

10
Eu entendi as instruções, no entanto, é bem provável que a intenção dele seja vincular o 'valor' ao modelo e está entendendo mal o que está acontecendo devido à maneira como o AngularJs está processando a tag.
James Davies

3
Ele funciona se você conseguir selecionar de valor com angular, mas no meu caso (isto é clássico enviar o formulário), os valores serão 0,1,2,3, não var1, var2, var3
Dragu

1
Supus que você estivesse vinculando o modelo, mas se você estiver simplesmente usando o AngularJS para renderizar um formulário enviado externamente ao angular, use a solução do EpokK.
James Davies

66
Sou apenas eu ou essa é a sintaxe mais levantada e obscura de todos os tempos?
fool4jesus

35

Você pode usar ng-repeat com optionmenos assim:

<form>
    <select ng-model="yourSelect" 
        ng-options="option as option for option in ['var1', 'var2', 'var3']"
        ng-init="yourSelect='var1'"></select>
    <input type="hidden" name="yourSelect" value="{{yourSelect}}" />
</form>

Quando você envia seu form pode ocultar o valor da entrada.


DEMO

ng- ng-repeat selecionado


Se você diminuiu minha resposta, verifique minha nova solução.
EpokK 13/08/13

21

você poderia usar algo como

<select ng-model="myselect">
    <option ng-repeat="o in options" ng-selected="{{o==myselect}}" value="{{o}}">
        {{o}}
    </option>
</select>

usando ng-selected, você pré-seleciona a opção no caso de myselect ter sido pré-preenchido.

Eu prefiro esse método ao invés de ng-options, pois ng-options funciona apenas com matrizes. O ng-repeat também funciona com objetos do tipo json.


1
ng-optionstambém trabalha com fontes de dados de objetos. Veja docs.angularjs.org/api/ng/directive/select
Charlie Schliesser

1
Embora outros tenham fornecido soluções alternativas, essa solução é de longe o estilo html mais elegante e próximo do antigo, funciona tanto com a vinculação de modelo angular quanto com o envio de formulário. Obrigado!
Fadi Chamieh

4
ng-selected não precisa do guidão, pois é uma diretiva angular. Excelente solução.
Kasey Speakman

20

Se você configurar o seu selecione da seguinte maneira:

<select ng-model="myselect" ng-options="b for b in options track by b"></select>

você vai ter:

<option value="var1">var1</option>
<option value="var2">var2</option>
<option value="var3">var3</option>

violino de trabalho: http://jsfiddle.net/x8kCZ/15/


1
Essa solução foi a única que funcionou para mim para selecionar o valor inicial em uma matriz de strings.
Ena

Sim, essa deve ser a resposta, a faixa faz a mágica para mim.
bacamarte

Eu estava esperando menos depois de seguir as soluções acima, mas essa foi a maneira mais fácil
sac Dahal

10
<select ng-model="option" ng-options="o for o in options">

$ scope.option será igual a 'var1' após a alteração, mesmo que você veja o valor = "0" no html gerado

plunker

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.