Eu li sobre isso em outros posts, mas não consegui'não consegui descobrir.
Eu tenho uma matriz,
$scope.items = [
{ID: '000001', Title: 'Chicago'},
{ID: '000002', Title: 'New York'},
{ID: '000003', Title: 'Washington'},
];
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 ID=000002.
Eu li select e tentei, mas não consigo't descobrir.
Uma coisa a notar é que ngModel é required for ngOptions to work... note o ng-model="blah"
que é dizer "set $scope.blah to the selected value".
Experimenta isto:
<select ng-model="blah" ng-options="item.ID as item.Title for item in items"></select>
Aqui's mais da documentação da AngularJS's (se você tem't o viu):
para fontes de dados de array:
- etiqueta para valor na matriz
- selecione como etiqueta para valor na matriz
- grupo de etiquetas por grupo para valor em matriz = selecionar como grupo de etiquetas por grupo para valor na matriz
para fontes de dados de objetos:
- etiqueta para (chave , valor) no objeto
- selecionar como etiqueta para (chave , valor) no objeto
- grupo de etiquetas por grupo para (chave, valor) no objeto
- selecionar como grupo de etiquetas por grupo para (chave, valor) no objeto
Para alguns esclarecimentos sobre os valores da etiqueta da opção em AngularJS:
Quando você utiliza ng-options
, os valores das tags de opção escritos por ng-options serão sempre o índice do item da array com o qual a tag de opção se relaciona. Isto é porque AngularJS realmente permite que você selecione objetos inteiros com controles seletivos, 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>
O acima mencionado permitirá que você selecione um objeto inteiro em $scope.selectedItem
diretamente. O ponto é, com AngularJS, você não'não precisa se preocupar com o que's na sua tag de opção. Deixe AngularJS lidar com isso; você só deve se preocupar com o que's no seu modelo no seu escopo.
Aqui está um mergulhador demonstrando o comportamento acima, e mostrando o HTML escrito
Lidar com a opção padrão:
Há algumas coisas que eu'falhei em mencionar 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-init
que define o modelo (de ng-model
) para o primeiro elemento nos itens que você repete em ng-options
:
<select ng-init="foo = foo || items[0]" ng-model="foo" ng-options="item as item.name for item in items"></select>
Nota: Isto pode ficar um pouco louco se foo
for inicializado corretamente para algo "falsy". Nesse caso, você'vai querer lidar com a inicialização do foo
no seu controlador, muito provavelmente.
Personalizando a opção padrão:
Isto é um pouco diferente; aqui tudo que você precisa fazer é adicionar uma tag de opção como uma criança da sua seleção, com um atributo de valor vazio, e depois personalizar o seu texto interno:
<select ng-model="foo" ng-options="item as item.name for item in items">
<option value="">Nothing selected</option>
</select>
Nota: Neste caso o "vazio" opção ficará lá mesmo depois de você selecionar uma opção diferente. Este é't o caso para o comportamento padrão das seleções sob AngularJS.
Uma opção padrão personalizada que se esconde após uma seleção é feita:
Se você queria que sua opção padrão personalizada fosse embora 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>
I'm aprendendo AngularJS e estava lutando com a seleção também. Eu sei que esta pergunta já está respondida, mas eu queria compartilhar mais algum código, mesmo assim.
No meu teste eu 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 selecção na caixa de listagem de marcas for mais tarde reiniciada (definir para 'Seleccione Marca') então a caixa de listagem de modelos é novamente desactivada E a sua selecção é também reiniciada (para 'Seleccione Modelo'). As marcas são recuperadas como um recurso enquanto os modelos são apenas codificados.
[
{"code": "0", "name": "Select Make"},
{"code": "1", "name": "Acura"},
{"code": "2", "name": "Audi"}
]
angular.module('makeServices', ['ngResource']).
factory('Make', function($resource){
return $resource('makes.json', {}, {
query: {method:'GET', isArray:true}
});
});
<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>
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"};
}
Em 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>