Trabalhando com select usando as opções ng do AngularJS

Eu li sobre isso em outros posts, mas não consegui descobrir.

Eu tenho uma matriz

$scope.items = [
   {ID: '000001', Title: 'Chicago'},
   {ID: '000002', Title: 'New York'},
   {ID: '000003', Title: 'Washington'},
];

Eu quero renderizá-lo como:

<select>
  <option value="000001">Chicago</option>
  <option value="000002">New York</option>
  <option value="000003">Washington</option>
</select>

E também quero selecionar a opção com o ID = 000002.

Eu li selecionar e tentei, mas não consigo descobrir.

Uma coisa a observar é que o ngModel é necessário para o ngOptions funcionar ... observe o ng-model="blah"que está dizendo "defina $ scope.blah com o valor selecionado".

Tente o seguinte:

<select ng-model="blah" ng-options="item.ID as item.Title for item in items"></select>

Aqui está mais da documentação do AngularJS (se você ainda não o viu):

para fontes de dados de matriz:

• rótulo para valor na matriz
• selecione como rótulo para o valor na matriz
• grupo de etiquetas por grupo para o valor na matriz = selecione como grupo de etiquetas por grupo para o valor na matriz

para fontes de dados do objeto:

• rótulo para (chave, valor) no objeto
• selecione como rótulo para (chave, valor) no objeto
• grupo de etiquetas por grupo para (chave, valor) no objeto
• selecione como grupo de etiquetas por grupo para (chave, valor) no objeto

Para algum esclarecimento sobre os valores das tags de opção no AngularJS:

Quando você usa ng-options, os valores das tags de opção gravados por ng-options sempre serão o índice do item da matriz à qual a tag de opção se refere . Isso ocorre porque o AngularJS realmente permite selecionar objetos inteiros com controles selecionados, e não apenas tipos primitivos. Por exemplo:

app.controller('MainCtrl', function($scope) {
   $scope.items = [
     { id: 1, name: 'foo' },
     { id: 2, name: 'bar' },
     { id: 3, name: 'blah' }
   ];
});

<div ng-controller="MainCtrl">
   <select ng-model="selectedItem" ng-options="item as item.name for item in items"></select>
   <pre>{{selectedItem | json}}</pre>
</div>

A descrição acima permitirá que você selecione um objeto inteiro $scope.selectedItemdiretamente. O ponto é que, com o AngularJS, você não precisa se preocupar com o que está em sua tag de opção. Deixe o AngularJS lidar com isso; você só deve se preocupar com o que está no seu modelo no seu escopo.

Aqui está um plunker demonstrando o comportamento acima e mostrando o HTML gravado

Lidando com a opção padrão:

Há algumas coisas que não mencionei acima relacionadas à opção padrão.

Selecionando a primeira opção e removendo a opção vazia:

Você pode fazer isso adicionando um simples ng-initque define o modelo (de ng-model) para o primeiro elemento nos itens em que está repetindo ng-options:

<select ng-init="foo = foo || items[0]" ng-model="foo" ng-options="item as item.name for item in items"></select>

Nota: Isso pode ficar um pouco louco, se foofor inicializado corretamente com algo "falso". Nesse caso, você desejará lidar com a inicialização do fooseu controlador, provavelmente.

Customizando a opção padrão:

Isto é um pouco diferente; aqui tudo o que você precisa fazer é adicionar uma tag de opção como filho do seu select, com um atributo de valor vazio, e personalizar seu texto interno:

<select ng-model="foo" ng-options="item as item.name for item in items">
   <option value="">Nothing selected</option>
</select>

Nota: Nesse caso, a opção "vazia" permanecerá lá, mesmo depois que você selecionar uma opção diferente. Este não é o caso do comportamento padrão de seleções no AngularJS.

Uma opção padrão personalizada que oculta após a seleção ser feita:

Se você deseja que sua opção padrão personalizada desapareça depois de selecionar um valor, você pode adicionar um atributo ng-hide à sua opção padrão:

<select ng-model="foo" ng-options="item as item.name for item in items">
   <option value="" ng-if="foo">Select something to remove me.</option>
</select>

Estou aprendendo o AngularJS e também estava lutando com a seleção. Eu sei que essa pergunta já foi respondida, mas eu queria compartilhar mais um pouco de código.

No meu teste, tenho duas caixas de listagem: marcas de carros e modelos de carros. A lista de modelos é desativada até que alguma marca seja selecionada. Se a seleção na caixa de listagem make for redefinida posteriormente (definida como 'Select Make'), a caixa de listagem de modelos será desativada novamente E sua seleção também será redefinida (para 'Select Model'). As marcas são recuperadas como um recurso, enquanto os modelos são apenas codificados.

Faz JSON:

[
{"code": "0", "name": "Select Make"},
{"code": "1", "name": "Acura"},
{"code": "2", "name": "Audi"}
]

services.js:

angular.module('makeServices', ['ngResource']).
factory('Make', function($resource){
    return $resource('makes.json', {}, {
        query: {method:'GET', isArray:true}
    });
});

Arquivo HTML:

<div ng:controller="MakeModelCtrl">
  <div>Make</div>
  <select id="makeListBox"
      ng-model="make.selected"
      ng-options="make.code as make.name for make in makes"
      ng-change="makeChanged(make.selected)">
  </select>

  <div>Model</div>
  <select id="modelListBox"
     ng-disabled="makeNotSelected"
     ng-model="model.selected"
     ng-options="model.code as model.name for model in models">
  </select>
</div>

controllers.js:

function MakeModelCtrl($scope)
{
    $scope.makeNotSelected = true;
    $scope.make = {selected: "0"};
    $scope.makes = Make.query({}, function (makes) {
         $scope.make = {selected: makes[0].code};
    });

    $scope.makeChanged = function(selectedMakeCode) {
        $scope.makeNotSelected = !selectedMakeCode;
        if ($scope.makeNotSelected)
        {
            $scope.model = {selected: "0"};
        }
    };

    $scope.models = [
      {code:"0", name:"Select Model"},
      {code:"1", name:"Model1"},
      {code:"2", name:"Model2"}
    ];
    $scope.model = {selected: "0"};
}

Por alguma razão, o AngularJS me deixa confuso. A documentação deles é horrível sobre isso. Mais bons exemplos de variações seriam bem-vindos.

De qualquer forma, tenho uma pequena variação na resposta de Ben Lesh.

Minhas coleções de dados são assim:

items =
[
   { key:"AD",value:"Andorra" }
,  { key:"AI",value:"Anguilla" }
,  { key:"AO",value:"Angola" }
 ...etc..
]

Agora

<select ng-model="countries" ng-options="item.key as item.value for item in items"></select>

ainda resultou no valor das opções como o índice (0, 1, 2 etc.).

Adicionando faixa Por corrigido para mim:

<select ng-model="blah" ng-options="item.value for item in items track by item.key"></select>

Eu acho que acontece com mais frequência que você queira adicionar uma matriz de objetos a uma lista de seleção, por isso vou lembrar dessa!

Esteja ciente de que no AngularJS 1.4 você não pode mais usar ng-options, mas precisa usar ng-repeatsua tag de opção:

<select name="test">
   <option ng-repeat="item in items" value="{{item.key}}">{{item.value}}</option>
</select>

A pergunta já está respondida (BTW, resposta realmente boa e abrangente fornecida por Ben), mas eu gostaria de acrescentar outro elemento para completar, que também pode ser muito útil.

No exemplo sugerido por Ben:

<select ng-model="blah" ng-options="item.ID as item.Title for item in items"></select>

a seguir ngOptions forma foi usado: select as label for value in array.

Label é uma expressão cujo resultado será o rótulo do <option>elemento. Nesse caso, você pode executar certas concatenações de cadeias, para ter rótulos de opções mais complexos.

Exemplos:

• ng-options="item.ID as item.Title + ' - ' + item.ID for item in items" fornece etiquetas como Title - ID
• ng-options="item.ID as item.Title + ' (' + item.Title.length + ')' for item in items"fornece rótulos como Title (X), onde Xé o comprimento da cadeia de título.

Você também pode usar filtros, por exemplo,

• ng-options="item.ID as item.Title + ' (' + (item.Title | uppercase) + ')' for item in items"fornece rótulos como Title (TITLE), onde o valor Título da propriedade Título e TITLE é o mesmo valor, mas convertido em caracteres maiúsculos.
• ng-options="item.ID as item.Title + ' (' + (item.SomeDate | date) + ')' for item in items"fornece rótulos como Title (27 Sep 2015), se seu modelo tem uma propriedadeSomeDate

No CoffeeScript:

#directive
app.directive('select2', ->
    templateUrl: 'partials/select.html'
    restrict: 'E'
    transclude: 1
    replace: 1
    scope:
        options: '='
        model: '='
    link: (scope, el, atr)->
        el.bind 'change', ->
            console.log this.value
            scope.model = parseInt(this.value)
            console.log scope
            scope.$apply()
)

<!-- HTML partial -->
<select>
  <option ng-repeat='o in options'
          value='{{$index}}' ng-bind='o'></option>
</select>

<!-- HTML usage -->
<select2 options='mnuOffline' model='offlinePage.toggle' ></select2>

<!-- Conclusion -->
<p>Sometimes it's much easier to create your own directive...</p>

Se você precisar de um título personalizado para cada opção, ng-optionsnão é aplicável. Em vez disso, use ng-repeatcom as opções:

<select ng-model="myVariable">
  <option ng-repeat="item in items"
          value="{{item.ID}}"
          title="Custom title: {{item.Title}} [{{item.ID}}]">
       {{item.Title}}
  </option>
</select>

Espero que o seguinte funcione para você.

<select class="form-control"
        ng-model="selectedOption"
        ng-options="option.name + ' (' + (option.price | currency:'USD$') + ')' for option in options">
</select>

Pode ser útil. As ligações nem sempre funcionam.

<select id="product" class="form-control" name="product" required
        ng-model="issue.productId"
        ng-change="getProductVersions()"
        ng-options="p.id as p.shortName for p in products"></select>

Por exemplo, você preenche o modelo de origem da lista de opções de um serviço REST. Um valor selecionado era conhecido antes de preencher a lista e foi definido. Depois de executar a solicitação REST com $ http, a opção de lista é concluída.

Mas a opção selecionada não está definida. Por razões desconhecidas, o AngularJS na execução de shadow $ digest não liga selecionado como deveria. Eu tenho que usar o jQuery para definir o selecionado. É importante! AngularJS, na sombra, adiciona o prefixo ao valor do "valor" attr para gerado pelas opções ng-repeat. Para int, é "number:".

$scope.issue.productId = productId;
function activate() {
    $http.get('/product/list')
       .then(function (response) {
           $scope.products = response.data;

           if (productId) {
               console.log("" + $("#product option").length);//for clarity
               $timeout(function () {
                   console.log("" + $("#product option").length);//for clarity
                   $('#product').val('number:'+productId);

               }, 200);
           }
       });
}