javascript - seleccionar - obtener el valor de un select angularjs
Cómo establecer el valor predeterminado en ng-options (4)
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í
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.
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.
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/
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>
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/>