Aqui está o que parece estar incomodando muitas pessoas (inclusive eu).

Ao usar a ng-optionsdiretiva no AngularJS para preencher as opções de uma <select>tag, não consigo descobrir como definir o valor de uma opção. A documentação para isso é realmente incerta - pelo menos para um simplório como eu.

Posso definir o texto para uma opção facilmente assim:

ng-options="select p.text for p in resultOptions"

Quando resultOptionsé, por exemplo:

[
    {
        "value": 1,
        "text": "1st"
    },
    {
        "value": 2,
        "text": "2nd"
    }
]

Deve ser (e provavelmente é) a coisa mais simples para definir os valores das opções, mas até agora não entendi.

Veja ngOptions

ngOptions (opcional) - { comprehension_expression=} - em uma das seguintes formas:

Para fontes de dados da matriz : label for value in array select as label for value in array label group by group for value in array select as label group by group for value in array track by trackexpr Para fontes de dados do objeto: label for (key , value) in object select as label for (key , value) in object label group by group for (key, value) in object select as label group by group for (key, value) in object

No seu caso, deve ser

array = [{ "value": 1, "text": "1st" }, { "value": 2, "text": "2nd" }];

<select ng-options="obj.value as obj.text for obj in array"></select>

Atualizar

Com as atualizações no AngularJS, agora é possível definir o valor real para o valueatributo do selectelemento com track byexpressão.

<select ng-options="obj.text for obj in array track by obj.value">
</select>

Como se lembrar dessas coisas feias

Para todas as pessoas que estão tendo dificuldades para se lembrar desta forma de sintaxe: Concordo que essa não é a sintaxe mais fácil ou bonita. Essa sintaxe é uma espécie de versão estendida das compreensões de lista do Python e do conhecimento que me ajuda a lembrar a sintaxe com muita facilidade. É algo como isto:

Código Python:

my_list = [x**2 for x in [1, 2, 3, 4, 5]]
> [1, 4, 9, 16, 25]

# Let people to be a list of person instances
my_list2 = [person.name for person in people]
> my_list2 = ['Alice', 'Bob']

Esta é realmente a mesma sintaxe que a primeira listada acima. No entanto, <select>geralmente precisamos diferenciar entre o valor real no código e o texto mostrado (o rótulo) em um <select>elemento.

Como, precisamos person.idno código, mas não queremos mostrar idao usuário; queremos mostrar o nome dele. Da mesma forma, não estamos interessados ​​no person.namecódigo. Aí vem a aspalavra-chave para rotular as coisas. Então fica assim:

person.id as person.name for person in people

Ou, em vez de person.idprecisarmos da própria personinstância / referência. Ver abaixo:

person as person.name for person in people

Para objetos JavaScript, o mesmo método também se aplica. Lembre-se de que os itens no objeto são desconstruídos com (key, value)pares.

Como o valor atribui seu valor:

• Ao usar uma matriz como fonte de dados, será o índice do elemento da matriz em cada iteração;
• Ao usar um objeto como fonte de dados, ele será o nome da propriedade em cada iteração.

Portanto, no seu caso, deve ser:

obj = { '1': '1st', '2': '2nd' };

<select ng-options="k as v for (k,v) in obj"></select>

Eu também tive esse problema. Não consegui definir meu valor em ng-options. Todas as opções geradas foram configuradas com 0, 1, ..., n.

Para acertar, fiz algo parecido com isto nas minhas opções ng:

HTML:

<select ng-options="room.name for room in Rooms track by room.price">
    <option value="">--Rooms--</option>
</select>

Eu uso "rastrear por" para definir todos os meus valores com room.price.

(Este exemplo é péssimo: porque se houvesse mais de um preço igual, o código falharia. Portanto, certifique-se de ter valores diferentes.)

JSON:

$scope.Rooms = [
            { name: 'SALA01', price: 100 },
            { name: 'SALA02', price: 200 },
            { name: 'SALA03', price: 300 }
        ];

Aprendi no post do blog Como definir o valor inicial selecionado de um elemento de seleção usando as opções ng de Angular.JS e rastrear por .

Assista o vídeo. É uma ótima aula :)

Se você deseja alterar o valor de seus optionelementos porque o formulário será enviado ao servidor, em vez de fazer isso,

<select name="text" ng-model="text" ng-options="select p.text for p in resultOptions"></select>

Você consegue fazer isso:

<select ng-model="text" ng-options="select p.text for p in resultOptions"></select>
<input type="hidden" name="text" value="{{ text }}" />

O valor esperado será enviado através do formulário com o nome correto.

Para enviar um valor personalizado chamado my_heroao servidor usando um formulário normal, envie:

JSON:

"heroes": [
  {"id":"iron", "label":"Iron Man Rocks!"},
  {"id":"super", "label":"Superman Rocks!"}
]

HTML:

<select ng-model="hero" ng-options="obj.id as obj.label for obj in heroes"></select>
<input type="hidden" name="my_hero" value="{{hero}}" />

O servidor receberá um ironou supercomo o valor de my_hero.

Isso é semelhante à resposta de @neemzy , mas especificando dados separados para o valueatributo.

Parece ng-optionscomplicado de usar (possivelmente frustrante), mas, na realidade, temos um problema de arquitetura.

O AngularJS serve como uma estrutura MVC para um aplicativo HTML + JavaScript dinâmico. Embora seu componente (V) iew ofereça "modelagem" de HTML, seu principal objetivo é conectar as ações do usuário, através de um controlador, a alterações no modelo. Portanto, o nível apropriado de abstração, do qual trabalhar no AngularJS, é que um elemento de seleção define um valor no modelo para um valor de uma consulta .

• Como uma fila de consulta é apresentada ao usuário é a (V) a preocupação de iew e ng-optionsfornece a forpalavra-chave para ditar o que o conteúdo do elemento de opção deve ser isto p.text for p in resultOptions .
• Como uma linha selecionada é apresentada ao servidor é a preocupação do (M) odel. Portanto, ng-optionsfornece a aspalavra-chave para especificar qual valor é fornecido ao modelo como em k as v for (k,v) in objects.

A solução correta para esse problema é de natureza arquitetônica e envolve a refatoração do HTML para que o (M) odel execute a comunicação do servidor quando necessário (em vez de o usuário enviar um formulário).

Se uma página HTML do MVC for desnecessária engenharia excessiva para o problema em questão: use apenas a parte de geração HTML do componente iew do AngularJS (V). Nesse caso, siga o mesmo padrão usado para gerar elementos como <li />'s under <ul />' e coloque um ng-repeat em um elemento opcional:

<select name=“value”>
    <option ng-repeat=“value in Model.Values” value=“{{value.value}}”>
        {{value.text}}
    </option>
</select>

Como kludge , sempre é possível mover o atributo name do elemento select para um elemento de entrada oculto:

<select ng-model=“selectedValue” ng-options=“value.text for value in Model.Values”>
</select>
<input type=“hidden” name=“value” value=“{{selectedValue}}” />

Você consegue fazer isso:

<select ng-model="model">
    <option value="">Select</option>
    <option ng-repeat="obj in array" value="{{obj.id}}">{{obj.name}}</option>
</select>

- ATUALIZAÇÃO

Após algumas atualizações, a solução do usuário frm.adiputra é muito melhor. Código:

obj = { '1': '1st', '2': '2nd' };
<select ng-options="k as v for (k,v) in obj"></select>

Hoje luto com esse problema. Eu li a documentação do AngularJS, esta e outras postagens e alguns blogs que eles levam. Todos eles me ajudaram a detalhar os detalhes, mas no final isso parece ser um tópico confuso. Principalmente por causa das muitas nuances sintáticas de ng-options.

No final, para mim, tudo se reduz a menos.

Dado um escopo configurado da seguinte maneira:

        //Data used to populate the dropdown list
        $scope.list = [
           {"FirmnessID":1,"Description":"Soft","Value":1},         
           {"FirmnessID":2,"Description":"Medium-Soft","Value":2},
           {"FirmnessID":3,"Description":"Medium","Value":3}, 
           {"FirmnessID":4,"Description":"Firm","Value":4},     
           {"FirmnessID":5,"Description":"Very Firm","Value":5}];

        //A record or row of data that is to be save to our data store.
        //FirmnessID is a foreign key to the list specified above.
        $scope.rec = {
           "id": 1,
           "FirmnessID": 2
        };

Isso é tudo o que eu precisava para obter o resultado desejado:

        <select ng-model="rec.FirmnessID"
                ng-options="g.FirmnessID as g.Description for g in list">
            <option></option>
        </select>   

Observe que eu não usei track by. O uso track bydo item selecionado sempre retornaria o objeto que correspondia ao FirmnessID, em vez do FirmnessID. Isso agora atende aos meus critérios, que é que ele retorne um valor numérico em vez do objeto, e use ng-optionspara obter a melhoria de desempenho que ele fornece, não criando um novo escopo para cada opção gerada.

Além disso, eu precisava da primeira linha em branco, então simplesmente adicionei um <option>ao <select>elemento.

Aqui está um Plunkr que mostra o meu trabalho.

Em vez de usar o novo recurso 'rastrear por', você pode simplesmente fazer isso com uma matriz se quiser que os valores sejam os mesmos do texto:

<select ng-options="v as v for (k,v) in Array/Obj"></select>

Observe a diferença entre a sintaxe padrão, que tornará os valores as chaves do objeto / matriz e, portanto, 0,1,2 etc. para uma matriz:

<select ng-options"k as v for (k,v) in Array/Obj"></select>

k como v se torna v como v .

Descobri isso apenas com base no senso comum, observando a sintaxe. (k, v) é a instrução real que divide a matriz / objeto em pares de valores-chave.

Na instrução 'k as v', k será o valor ev será a opção de texto exibida ao usuário. Eu acho que 'rastrear' é bagunçado e exagerado.

Isso foi mais adequado para todos os cenários, de acordo comigo:

<select ng-model="mySelection.value">
   <option ng-repeat="r in myList" value="{{r.Id}}" ng-selected="mySelection.value == r.Id">{{r.Name}}
   </option>
</select>

onde você pode usar seu modelo para ligar os dados. Você obterá o valor que o objeto conterá e a seleção padrão com base no seu cenário.

Foi assim que resolvi isso. Acompanhei a seleção por valor e configurei a propriedade do item selecionado para o modelo no meu código JavaScript.

Countries =
[
    {
        CountryId = 1, Code = 'USA', CountryName = 'United States of America'
    },
    {
       CountryId = 2, Code = 'CAN', CountryName = 'Canada'
    }
]

<select ng-model="vm.Enterprise.AdminCountry" ng-options="country.CountryName for country in vm.Countries track by country.CountryId">

vmé meu controlador e o país no controlador recuperado do serviço é {CountryId =1, Code = 'USA', CountryName='United States of America'}.

Quando selecionei outro país no menu suspenso de seleção e postei minha página com "Salvar", vinculei o país correto.

A ng-optionsdiretiva não define o atributo value nos <options>elementos para matrizes:

Usando limit.value as limit.text for limit in limitsmeios:

defina o <option>rótulo de como limit.text
salvar o limit.valuevalor nasng-model

Consulte a pergunta Estouro de pilha: ng-options do AngularJS não renderizando valores .

<select ng-model="color" ng-options="(c.name+' '+c.shade) for c in colors"></select><br>

Você pode usar ng-options para obter a ligação de tag select para valorizar e exibir membros

Ao usar essa fonte de dados

countries : [
              {
                 "key": 1,
                 "name": "UAE"
             },
              {
                  "key": 2,
                  "name": "India"
              },
              {
                  "key": 3,
                  "name": "OMAN"
              }
         ]

você pode usar o abaixo para vincular sua tag de seleção ao valor e nome

<select name="text" ng-model="name" ng-options="c.key as c.name for c in countries"></select>

funciona muito bem

A resposta correta para esta pergunta foi fornecida pelo usuário frm.adiputra , pois atualmente essa parece ser a única maneira de controlar explicitamente o atributo value dos elementos da opção.

No entanto, eu só queria enfatizar que "selecionar" não é uma palavra-chave nesse contexto, mas é apenas um espaço reservado para uma expressão. Por favor, consulte a lista a seguir, para a definição da expressão "select", bem como outras expressões que podem ser usadas na diretiva ng-options.

O uso de select, conforme descrito na pergunta:

ng-options='select p.text for p  in resultOptions'

está essencialmente errado.

Com base na lista de expressões, parece que trackexpr pode ser usado para especificar o valor, quando as opções são fornecidas em uma matriz de objetos, mas foi usado apenas com o agrupamento.

Na documentação do AngularJS para ng-options:

• array / objeto : uma expressão que é avaliada em um array / objeto para a iteração.
• value : variável local que fará referência a cada item na matriz ou a cada valor de propriedade do objeto durante a iteração.
• key : variável local que se referirá a um nome de propriedade no objeto durante a iteração.
• label : O resultado dessa expressão será o rótulo do elemento. A expressão provavelmente se referirá à variável value (por exemplo, value.propertyName).
• select : O resultado dessa expressão será vinculado ao modelo do elemento pai. Se não especificado, a expressão selecionada será padronizada como valor.
• group : o resultado dessa expressão será usado para agrupar opções usando o elemento DOM.
• trackexpr : usado ao trabalhar com uma matriz de objetos. O resultado dessa expressão será usado para identificar os objetos na matriz. O trackexpr provavelmente se referirá à variável value (por exemplo, value.propertyName).

Selecionar um item nas opções ng pode ser um pouco complicado, dependendo de como você define a fonte de dados.

Depois de lutar com eles por um tempo, acabei fazendo uma amostra com as fontes de dados mais comuns que eu uso. Você pode encontrá-lo aqui:

http://plnkr.co/edit/fGq2PM?p=preview

Agora, para fazer o ng-options funcionar, aqui estão algumas coisas a considerar:

1. Normalmente, você obtém as opções de uma fonte e o valor selecionado de outra. Por exemplo:
   • states :: data para ng-options
   • user.state :: Opção para definir como selecionado
2. Com base em 1, a coisa mais fácil / lógica a fazer é preencher a seleção com uma fonte e depois definir o valor selecionado através do código. Raramente seria melhor obter um conjunto de dados misto.
3. O AngularJS permite que os controles selecionados contenham mais de key | label. Muitos exemplos online colocam objetos como 'chave' e, se você precisar de informações do objeto, defina-as dessa maneira, caso contrário, use a propriedade específica necessária como chave. (ID, CÓDIGO, etc. Como na amostra plckr)

4. A maneira de definir o valor do controle suspenso / selecionar depende do número 3,

   • Se a chave suspensa for uma propriedade única (como em todos os exemplos no plunkr), basta configurá-la, por exemplo: $scope.dropdownmodel = $scope.user.state;

   • Se você definir o objeto como chave, precisará percorrer as opções, mesmo atribuir o objeto não definirá o item como selecionado, pois eles terão diferentes hashkeys, por exemplo:

     for (var i = 0, len = $scope.options.length; i < len; i++) {
       if ($scope.options[i].id == savedValue) { // Your own property here:
         console.log('Found target! ');
         $scope.value = $scope.options[i];
         break;
       }
     }

Você pode substituir saveValue pela mesma propriedade no outro objeto $scope.myObject.myProperty,.

Para mim, a resposta de Bruno Gomes é a melhor resposta.

Mas, na verdade, você não precisa se preocupar em definir a propriedade value das opções selecionadas. O AngularJS cuidará disso. Deixe-me explicar em detalhes.

Por favor, considere este violino

angular.module('mySettings', []).controller('appSettingsCtrl', function ($scope) {

    $scope.timeFormatTemplates = [{
        label: "Seconds",
        value: 'ss'
    }, {
        label: "Minutes",
        value: 'mm'
    }, {
        label: "Hours",
        value: 'hh'
    }];


    $scope.inactivity_settings = {
        status: false,
        inactive_time: 60 * 5 * 3, // 15 min (default value), that is, 900 seconds
        //time_format: 'ss', // Second (default value)
        time_format: $scope.timeFormatTemplates[0], // Default seconds object
    };

    $scope.activity_settings = {
        status: false,
        active_time: 60 * 5 * 3, // 15 min (default value), that is,  900 seconds
        //time_format: 'ss', // Second (default value)
        time_format: $scope.timeFormatTemplates[0], // Default seconds object
    };

    $scope.changedTimeFormat = function (time_format) {
        'use strict';

        console.log('time changed');
        console.log(time_format);
        var newValue = time_format.value;

        // do your update settings stuffs
    }
});

Como você pode ver na saída do violino, o que você escolher para as opções da caixa de seleção, é o seu valor personalizado, ou o valor 0, 1, 2 gerado automaticamente pelo AngularJS, não importa na saída, a menos que você esteja usando jQuery ou qualquer outro outra biblioteca para acessar o valor dessas opções da caixa de combinação e manipulá-lo de acordo.

Um ano após a pergunta, tive que encontrar uma resposta para essa pergunta, pois nenhuma delas deu a resposta real, pelo menos para mim.

Você perguntou como selecionar a opção, mas ninguém disse que essas duas coisas NÃO são iguais:

Se tivermos opções como esta:

$scope.options = [
    { label: 'one', value: 1 },
    { label: 'two', value: 2 }
  ];

E tentamos definir uma opção padrão como esta:

$scope.incorrectlySelected = { label: 'two', value: 2 };

Vai NÃO funcionar, mas se você tentar selecionar a opção como esta:

$scope.correctlySelected = $scope.options[1];

Ele vai TRABALHAR .

Embora esses dois objetos tenham as mesmas propriedades, o AngularJS os considera DIFERENTES porque o AngularJS é comparado pela referência .

Dê uma olhada no violino http://jsfiddle.net/qWzTb/ .

Por favor, use trilha por propriedade que diferencia valores e rótulos na caixa de seleção.

Tente por favor

<select ng-options="obj.text for obj in array track by obj.value"></select>

que atribuirá rótulos com texto e valor com valor (da matriz)

Para um objeto:

<select ng-model="mySelect" ng-options="key as value for (key, value) in object"></select>

É sempre doloroso para os desenvolvedores com ng-options. Por exemplo: Obter um valor selecionado em branco / vazio na tag de seleção. Especialmente ao lidar com objetos JSON em ng-options, torna-se mais tedioso. Aqui eu fiz alguns exercícios sobre isso.

Objetivo: Iterar a matriz de objetos JSON por meio da opção ng e definir o primeiro elemento selecionado.

Dados:

someNames = [{"id":"1", "someName":"xyz"}, {"id":"2", "someName":"abc"}]

Na tag select, tive que mostrar xyz e abc, onde xyz deve ser selecionado sem muito esforço.

HTML:

<pre class="default prettyprint prettyprinted" style=""><code>
    &lt;select class="form-control" name="test" style="width:160px"    ng-options="name.someName for name in someNames" ng-model="testModel.test" ng-selected = "testModel.test = testModel.test || someNames[0]"&gt;
&lt;/select&gt;
</code></pre>

Pelo exemplo de código acima, você pode sair desse exagero.

Outra referência :

O tutorial ANGULAR.JS: NG-SELECT E NG-OPTIONS me ajudou a resolver o problema:

<select id="countryId"
  class="form-control"
  data-ng-model="entity.countryId"
  ng-options="value.dataValue as value.dataText group by value.group for value in countries"></select>

<select ng-model="output">
   <option ng-repeat="(key,val) in dictionary" value="{{key}}">{{val}}</option>
</select>

Execute o trecho de código e veja as variações. Aqui está uma nota para uma compreensão rápida

1. Exemplo 1 (seleção de objeto): - ng-option="os.name for os in osList track by os.id". Aqui track by os.idé importante e deve estar lá e os.id as não deve ter antes os.name.

   • A ng-model="my_os"deve definir a um objeto com a chave como id como my_os={id: 2}.

2. Exemplo 2 (seleção de valor): - ng-option="os.id as os.name for os in osList". Aqui track by os.id NÃO deve estar lá e os.id as deve estar lá antes os.name.

   • O ng-model="my_os"deve ser definido como um valor comomy_os= 2

O trecho de código de restante explicará.

angular.module('app', []).controller('ctrl', function($scope, $timeout){
  
  //************ EXAMPLE 1 *******************
  $scope.osList =[
    { id: 1, name :'iOS'},
    { id: 2, name :'Android'},
    { id: 3, name :'Windows'}
  ]
  $scope.my_os = {id: 2};
  
  
  //************ EXAMPLE 2 *******************
  $timeout(function(){
    $scope.siteList = [
          { id: 1, name: 'Google'},
          { id: 2, name: 'Yahoo'},
          { id: 3, name: 'Bing'}
        ];
   }, 1000);
    
    $scope.my_site = 2;
  
    $timeout(function(){
      $scope.my_site = 3;
    }, 2000);
})

fieldset{
  margin-bottom: 40px;
  }
strong{
  color:red;
  }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.10/angular.min.js"></script>

<div ng-app="app" ng-controller="ctrl">

  <!--//************ EXAMPLE 1 *******************-->
  <fieldset>
    <legend>Example 1 (Set selection as <strong>object</strong>)</legend>
    
    <select ng-model="my_os" ng-options="os.name for os in osList track by os.id">
        <option value="">--Select--</option>
      </select>
    {{my_os}}
    
  </fieldset>
  
  
  <!--//************ EXAMPLE 2 *******************-->
  <fieldset>
    <legend>Example 2 (Set selection as <strong>value</strong>. Simulate ajax)</legend>
      <select ng-model="my_site" ng-options="site.id as site.name for site in siteList">
        <option value="">--Select--</option>
      </select>
      {{my_site}}
  </fieldset>
  
</div>

Como muitos disseram antes, se eu tiver dados, algo como isto:

countries : [
              {
                 "key": 1,
                 "name": "UAE"
             },
              {
                  "key": 2,
                  "name": "India"
              },
              {
                  "key": 3,
                  "name": "OMAN"
              }
         ]

Eu usaria como:

<select
    ng-model="selectedCountry"
    ng-options="obj.name for obj  in countries">
</select>

No seu Controller, você precisa definir um valor inicial para se livrar do primeiro item vazio:

 $scope.selectedCountry = $scope.countries[0];

 // You need to watch changes to get selected value
 $scope.$watchCollection(function() {
   return $scope.selectedCountry
 }, function(newVal, oldVal) {
     if (newVal === oldVal) {
       console.log("nothing has changed " + $scope.selectedCountry)
     } 
     else {
       console.log('new value ' + $scope.selectedCountry)
     }
 }, true)

Aqui está como eu resolvo esse problema em um aplicativo herdado:

Em HTML:

ng-options="kitType.name for kitType in vm.kitTypes track by kitType.id" ng-model="vm.itemTypeId"

Em JavaScript:

vm.kitTypes = [
    {"id": "1", "name": "Virtual"},
    {"id": "2", "name": "Physical"},
    {"id": "3", "name": "Hybrid"}
];

...

vm.itemTypeId = vm.kitTypes.filter(function(value, index, array){
    return value.id === (vm.itemTypeId || 1);
})[0];

Meu HTML exibe o valor da opção corretamente.

Diretiva ngOptions:

$scope.items = [{name: 'a', age: 20},{ name: 'b', age: 30},{ name: 'c', age: 40}];

• Case-1) rótulo para valor na matriz:

  <div>
      <p>selected item is : {{selectedItem}}</p>
      <p> age of selected item is : {{selectedItem.age}} </p>
      <select ng-model="selectedItem" ng-options="item.name for item in items">
      </select>
  </div>

Explicação da saída (suponha o 1º item selecionado):

selectedItem = {name: 'a', age: 20} // [por padrão, o item selecionado é igual ao item de valor ]

selectedItem.age = 20

• Caso-2) selecione como rótulo para o valor na matriz:

  <div>
      <p>selected item is : {{selectedItem}}</p>
      <select ng-model="selectedItem" ng-options="item.age as item.name for item in items">
      </select>
  </div>

Explicação de saída (suponha o 1º item selecionado): selectedItem = 20 // [selecionar parte é item.age ]