javascript - Cómo tener una opción predeterminada en un cuadro de selección de Angular.js
He buscado en Google y no puedo encontrar nada sobre esto.
Tengo este código.
<select ng-model="somethingHere"
ng-options="option.value as option.name for option in options"
></select>
Con algunos datos como estos
options = [{
name: 'Something Cool',
value: 'something-cool-value'
}, {
name: 'Something Else',
value: 'something-else-value'
}];
Y la salida es algo así.
<select ng-model="somethingHere"
ng-options="option.value as option.name for option in options"
class="ng-pristine ng-valid">
<option value="?" selected="selected"></option>
<option value="0">Something Cool</option>
<option value="1">Something Else</option>
</select>
¿Cómo es posible establecer la primera opción en los datos como el valor predeterminado para que obtenga un resultado como este?
<select ng-model="somethingHere" ....>
<option value="0" selected="selected">Something Cool</option>
<option value="1">Something Else</option>
</select>
Respuesta #1
Puedes simplemente usar ng-init así
<select ng-init="somethingHere = options[0]"
ng-model="somethingHere"
ng-options="option.name for option in options">
</select>
Respuesta #2
Si quieres asegurarte de que el valor de tu $scope.somethingHere no se sobrescriba cuando tu vista se inicialice, querrás hacer una coalescencia (somethingHere=somethingHere || options[0].value) del valor en tu ng-init de la siguiente manera:
<select ng-model="somethingHere"
ng-init="somethingHere = somethingHere || options[0].value"
ng-options="option.value as option.name for option in options">
</select>
Respuesta #3
Prueba esto:
HTML
<select
ng-model="selectedOption"
ng-options="option.name for option in options">
</select>
Javascript
function Ctrl($scope) {
$scope.options = [
{
name: 'Something Cool',
value: 'something-cool-value'
},
{
name: 'Something Else',
value: 'something-else-value'
}
];
$scope.selectedOption = $scope.options[0];
}
Plunker aquí.
Si realmente quieres establecer el valor que se vinculará al modelo, entonces cambia el atributo ng-options a
ng-options="option.value as option.name for option in options"
y el Javascript a
...
$scope.selectedOption = $scope.options[0].value;
Otro Plunker aquí considerando lo anterior.
Respuesta #4
Solo una respuesta de Srivathsa Harish Venkataramana mencionó track by, ¡lo cual es de hecho una solución para esto!
Aquí hay un ejemplo junto con Plunker (enlace abajo) de cómo usar track by en select ng-options:
<select ng-model="selectedCity"
ng-options="city as city.name for city in cities track by city.id">
<option value="">-- Select City --</option>
</select>
Si selectedCity está definido en el alcance de Angular, y tiene la propiedad id con el mismo valor que cualquier id de cualquier city en la lista de cities, se seleccionará automáticamente al cargar.
Aquí está Plunker para esto: http://plnkr.co/edit/1EVs7R20pCffewrG0EmI?p=preview
Consulte la documentación de origen para más detalles: https://code.angularjs.org/1.3.15/docs/api/ng/directive/select
Respuesta #5
Creo que, después de la inclusión de 'track by', puedes usarlo en ng-options para obtener lo que querías, como lo siguiente
<select ng-model="somethingHere" ng-options="option.name for option in options track by option.value" ></select>
Esta forma de hacerlo es mejor porque cuando quieras reemplazar la lista de cadenas por una lista de objetos, solo cambiarás esto a
<select ng-model="somethingHere" ng-options="object.name for option in options track by object.id" ></select>
donde somethingHere es un objeto con las propiedades name e id, por supuesto. Tenga en cuenta que 'as' no se usa de esta manera para expresar los ng-options, porque solo establecerá el valor y no podrá cambiarlo cuando esté usando track by
Respuesta #6
La respuesta aceptada usa ng-init, pero el documento dice que se debe evitar ng-init si es posible.
El único uso apropiado de ngInit es para crear alias de propiedades especiales de ngRepeat, como se muestra en la demostración a continuación. Aparte de este caso, deberías usar controladores en lugar de ngInit para inicializar valores en un scope.
También puedes usar ng-repeat en lugar de ng-options para tus opciones. Con ng-repeat, puedes usar ng-selected con las propiedades especiales de ng-repeat, es decir, $index, $odd, $even para que esto funcione sin ninguna codificación.
$first es una de las propiedades especiales de ng-repeat.
<select ng-model="foo">
<option ng-selected="$first" ng-repeat="(id,value) in myOptions" value="{{id}}">
{{value}}
</option>
</select>
---------------------- EDITAR ----------------
Aunque esto funciona, yo preferiría la respuesta de @mik-t cuando sabes qué valor seleccionar, https://stackoverflow.com/a/29564802/454252, que utiliza track-by y ng-options sin usar ng-init o ng-repeat.
Esta respuesta solo debe usarse cuando debes seleccionar el primer elemento sin saber qué valor elegir. Por ejemplo, estoy usando esto para la autocompletación que requiere elegir el PRIMER elemento todo el tiempo.
Respuesta #7
Mi solución a esto fue usar HTML para codificar de forma fija mi opción predeterminada. Así:
En HAML:
%select{'ng-model' => 'province', 'ng-options' => "province as province for province in summary.provinces", 'chosen' => "chosen-select", 'data-placeholder' => "BC & ON"}
%option{:value => "", :selected => "selected"}
BC & ON
En HTML:
<select ng-model="province" ng-options="province as province for province in summary.provinces" chosen="chosen-select" data-placeholder="BC & ON">
<option value="" selected="selected">BC & ON</option>
</select>
Quiero que mi opción predeterminada devuelva todos los valores de mi API, por eso tengo un valor en blanco. También disculpen mi HAML. Sé que esto no es directamente una respuesta a la pregunta del OP, pero la gente encuentra esto en Google. Espero que esto ayude a alguien más.
Respuesta #8
Utilice el siguiente código para llenar la opción seleccionada desde su modelo.
<select id="roomForListing" ng-model="selectedRoom.roomName" >
<option ng-repeat="room in roomList" title="{{room.roomName}}" ng-selected="{{room.roomName == selectedRoom.roomName}}" value="{{room.roomName}}">{{room.roomName}}</option>
</select>
Respuesta #9
Dependiendo de cuántas opciones tengas, podrías poner tus valores en un arreglo y llenar automáticamente tus opciones de esta manera
<select ng-model="somethingHere.values" ng-options="values for values in [5,4,3,2,1]">
<option value="">Pick a Number</option>
</select>
Respuesta #10
En mi caso, necesitaba insertar un valor inicial solo para decirle al usuario que seleccionara una opción, así que hago como el código a continuación:
<select ...
<option value="" ng-selected="selected">Select one option</option>
</select>
Cuando probé una opción con el valor != de una cadena vacía (null) la opción fue sustituida por Angular, pero, cuando puse una opción así (con valor null), el select apareció con esta opción.
Perdón por mi mal inglés y espero que ayude en algo con esto.