como usar o ng-option para definir o valor padrão do elemento select

Eu vi a documentação da diretiva de seleção Angular aqui: http://docs.angularjs.org/api/ng.directive:select . Eu não consigo descobrir como definir o valor padrão. Isso é confuso:

selecione como label para valor na matriz

Aqui está o object:

{ "type": "select", "name": "Service", "value": "Service 3", "values": [ "Service 1", "Service 2", "Service 3", "Service 4"] } 

O html (trabalhando):

 {{value}} 

e, em seguida, estou tentando adicionar um atributo ng-option dentro do elemento select para definir prop.value como a opção padrão (não funcionando).

 ng-options="(prop.value) for v in prop.values" 

O que estou fazendo de errado?

Então, supondo que o object esteja no seu escopo:

 

 function MyCtrl($scope) { $scope.prop = { "type": "select", "name": "Service", "value": "Service 3", "values": [ "Service 1", "Service 2", "Service 3", "Service 4"] }; } 

Plunkr de trabalho: http://plnkr.co/edit/wTRXZYEPrZJRizEltQ2g

A documentação angular para select * não responde explicitamente a esta questão, mas está lá. Se você olhar o script.js , verá isto:

 function MyCntrl($scope) { $scope.colors = [ {name:'black', shade:'dark'}, {name:'white', shade:'light'}, {name:'red', shade:'dark'}, {name:'blue', shade:'dark'}, {name:'yellow', shade:'light'} ]; $scope.color = $scope.colors[2]; // Default the color to red } 

Este é o html:

  

Esta parece ser uma maneira mais óbvia de padronizar um valor selecionado em um com ng-options . Também funcionará se você tiver labels / valores diferentes.

* Isso é do Angular 1.2.7

Essa resposta é mais útil quando você está trazendo dados de um database, faz modificações e, em seguida, persiste as alterações.

   

Veja o exemplo aqui:

http://plnkr.co/edit/HrT5vUMJOtP9esGngbIV

  

Se sua matriz de objects é complexa como:

 $scope.friends = [{ name: John , uuid: 1234}, {name: Joe, uuid, 5678}]; 

E o seu modelo atual foi definido para algo como:

 $scope.user.friend = {name:John, uuid: 1234}; 

Ajudou a usar a track by function no uuid (ou qualquer campo único), desde que o ng-model = “user.friend” também tenha um uuid:

  

Eu lutei com isso por algumas horas, então eu gostaria de acrescentar alguns esclarecimentos para isso, todos os exemplos observados aqui, referem-se a casos em que os dados são carregados a partir do próprio script, não de um serviço ou database, Por isso, gostaria de fornecer minha experiência para qualquer um que tenha o mesmo problema que eu.

Normalmente você salva apenas o id da opção desejada em seu database, então … vamos mostrar

service.js

 myApp.factory('Models', function($http) { var models = {}; models.allModels = function(options) { return $http.post(url_service, {options: options}); }; return models; }); 

controller.js

 myApp.controller('exampleController', function($scope, Models) { $scope.mainObj={id_main: 1, id_model: 101}; $scope.selected_model = $scope.mainObj.id_model; Models.allModels({}).success(function(data) { $scope.models = data; }); }); 

Finalmente o modelo html parcial.html

 Model:  

basicamente eu queria apontar essa peça ” model.id_model como model.name para model in models ” o ” model.id_model ” usa o id do model para o valor para que você possa casar com o ” mainObj.id_model ” que também é O ” selected_model “, este é apenas um valor simples, também ” como model.name ” é o label para o repetidor, finalmente, ” modelo em modelos ” é apenas o ciclo regular que todos nós conhecemos.

Espero que isso ajude alguém, e se isso acontecer, por favor vote: D

Uma maneira mais fácil de fazer isso é usar data-ng-init assim:

  

A principal diferença aqui é que você precisaria include o modelo data-ng-model

  

Basta adicionar opção com valor vazio. Vai funcionar.

DEMO Plnkr

O atributo ng-model define a opção selecionada e também permite canalizar um filtro como orderBy: orderModel.value

index.html

  

controllers.js

 $scope.orderOptions = [ {"name":"Newest","value":"age"}, {"name":"Alphabetical","value":"name"} ]; $scope.orderModel = $scope.orderOptions[0]; 

Se alguém estiver encontrando o valor padrão ocasionalmente não preenchido na página do Chrome, IE 10/11, Firefox – tente adicionar esse atributo ao seu campo de input / seleção para verificar a variável preenchida no HTML, da seguinte maneira: