javascript - seleccionar - obtener el valor de un select angularjs

Cómo establecer el valor predeterminado en ng-options

Question

Puedo establecer una lista desplegable con valor predeterminado en angularjs como,

 <select name="repeatSelect" id="repeatSelect" ng-model="repeatSelect" ng-init=" repeatSelect = data[0].id">
<option ng-repeat="option in data" value="{{option.id}}">{{option.name}}</option>
</select>

¿Cómo puedo lograr lo mismo usando ng-options ? I treid con,

 <select name="repeatSelect"
id="repeatSelect"
ng-model="repeatSelect"
ng-init=" repeatSelect = option.id"
ng-options="option.name for option in data track by option.id">
</select>

Pero no sirve. El violín de la muestra está aquí

Answer 1

Sugeriré un ejemplo de parte de HTML

<select class="form-control" ng-model="data.selectedOption" required ng-options="option.name as option.name for option in venueNamelists" ng-change="getmediationRooms(data.selectedOption)"></select>

En mi controlador

$ scope.data = {selectedOption: $ scope.venueNamelists [i] .name};

el valor del modelo debe ser igual al par clave, valor en las listas de nombres de lugar.

Answer 2

Todo este uso de ng-init .

De los documentos angulares:

Esta directiva puede ser abusada para agregar cantidades innecesarias de lógica en sus plantillas. Solo hay unos pocos usos apropiados de ngInit, como para aliasar propiedades especiales de ngRepeat, como se ve en la demostración a continuación; y para inyectar datos a través de secuencias de comandos del lado del servidor. Además de estos pocos casos, debe usar controladores en lugar de ngInit para inicializar valores en un ámbito.

Documentos fuente

En mi opinión, la forma correcta de establecer un valor predeterminado es simplemente completar previamente su propiedad ng-model con el valor seleccionado de sus ng-options , angular hace el resto.

Básicamente, al definir la propiedad $scope , su selección se vinculará para asignarle el valor predeterminado de su matriz de data . Si su matriz de data proviene de una solicitud ajax, simplemente asignela una vez que tenga los data .

.controller(''test'', [''$scope'', function ($scope) {
$scope.data = [{name: ''one'', id: 1}, {name: ''two'', id: 2},{name: ''three'', id: 3}];
$scope.repeatSelect= $scope.data[0];
}]);

Hay una advertencia a tener en cuenta. Si emplea la palabra clave as en su expresión, debe asignarle a su ng-model la propiedad real que le indica que seleccione.

Ver demostración de violín completo ambos: http://jsfiddle.net/kb99gee8/

Answer 3

Use ng-init para establecer el valor predeterminado para ng-options .

Aquí está el: demo

<select name="repeatSelect"
id="repeatSelect"
ng-model="repeatSelect"
ng-init=" repeatSelect = data[0].id"
ng-options="option.id as option.name for option in data">
</select>

Answer 4

he obtenido lo que necesita usando su código y ng-options como ha mencionado, aquí está Working Fiddle

CÓDIGO completo

<div ng-app="ngrepeatSelect">
<div ng-controller="ExampleController">
<form name="myForm">
<label for="repeatSelect">Angular select:</label>
<select name="repeatSelect"
id="repeatSelect"
ng-model="repeatSelect"
ng-init=" repeatSelect = data[0]"
ng-options="option.name for option in data track by option.id">
</select>
</form>
<br/> <tt>Selected value: {{repeatSelect.id}}</tt>
</div>
</div>
<br/>