javascript - con - Cómo tener una opción predeterminada en el cuadro de selección Angular.js
select angular 5 (24)
He buscado en Google y no puedo encontrar nada en esto.
Tengo este codigo
<select ng-model="somethingHere"
ng-options="option.value as option.name for option in options"
></select>
Con algunos datos como este.
options = [{
name: ''Something Cool'',
value: ''something-cool-value''
}, {
name: ''Something Else'',
value: ''something-else-value''
}];
Y la salida es algo como esto.
<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 obtener un resultado como este?
<select ng-model="somethingHere" ....>
<option value="0" selected="selected">Something Cool</option>
<option value="1">Something Else</option>
</select>
Usando select con ngOptions y configurando un valor predeterminado:
Consulte la documentación de docs.angularjs.org/api/ng/directive/ngOptions para ver más ejemplos de uso de ngOptions .
angular.module(''defaultValueSelect'', [])
.controller(''ExampleController'', [''$scope'', function($scope) {
$scope.data = {
availableOptions: [
{id: ''1'', name: ''Option A''},
{id: ''2'', name: ''Option B''},
{id: ''3'', name: ''Option C''}
],
selectedOption: {id: ''2'', name: ''Option B''} //This sets the default value of the select in the ui
};
}]);
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.0/angular.min.js"></script>
<body ng-app="defaultValueSelect">
<div ng-controller="ExampleController">
<form name="myForm">
<label for="mySelect">Make a choice:</label>
<select name="mySelect" id="mySelect"
ng-options="option.name for option in data.availableOptions track by option.id"
ng-model="data.selectedOption"></select>
</form>
<hr>
<tt>option = {{data.selectedOption}}</tt><br/>
</div>
Documentación oficial sobre elemento HTML SELECT con enlace de datos angular.
Enlace select a un valor no de cadena mediante el análisis / formateo de ngModel :
(function(angular) {
''use strict'';
angular.module(''nonStringSelect'', [])
.run(function($rootScope) {
$rootScope.model = { id: 2 };
})
.directive(''convertToNumber'', function() {
return {
require: ''ngModel'',
link: function(scope, element, attrs, ngModel) {
ngModel.$parsers.push(function(val) {
return parseInt(val, 10);
});
ngModel.$formatters.push(function(val) {
return '''' + val;
});
}
};
});
})(window.angular);
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.1/angular.min.js"></script>
<body ng-app="nonStringSelect">
<select ng-model="model.id" convert-to-number>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
{{ model }}
</body>
Otro ejemplo:
angular.module(''defaultValueSelect'', [])
.controller(''ExampleController'', [''$scope'', function($scope) {
$scope.availableOptions = [
{ name: ''Apple'', value: ''apple'' },
{ name: ''Banana'', value: ''banana'' },
{ name: ''Kiwi'', value: ''kiwi'' }
];
$scope.data = {selectedOption : $scope.availableOptions[1].value};
}]);
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.0/angular.min.js"></script>
<body ng-app="defaultValueSelect">
<div ng-controller="ExampleController">
<form name="myForm">
<select ng-model="data.selectedOption" required ng-options="option.value as option.name for option in availableOptions"></select>
</form>
</div>
</body>
¡Solo una respuesta de Srivathsa Harish Venkataramana mencionó una track by cual es una solución para esto!
Aquí hay un ejemplo junto con Plunker (enlace a continuación) de cómo usar track by en seleccionar 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 se define en el alcance angular, y tiene una propiedad de id con el mismo valor que cualquier id de cualquier city en la lista de cities , se seleccionará automáticamente en la carga.
Aquí está Plunker para esto: http://plnkr.co/edit/1EVs7R20pCffewrG0EmI?p=preview
Consulte la documentación de la fuente para obtener más detalles: https://code.angularjs.org/1.3.15/docs/api/ng/directive/select
Creo que la forma más fácil es
ng-selected="$first"
Creo que, después de la inclusión de ''seguimiento por'', puede usarlo en ng-options para obtener lo que desea, 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 desee reemplazar la lista de cadenas con la lista de objetos, simplemente cambiará esto a
<select ng-model="somethingHere" ng-options="object.name for option in options track by object.id" ></select>
donde algo aquí es un objeto con las propiedades nombre e id, por supuesto. Tenga en cuenta que ''as'' no se usa de esta manera para expresar las opciones ng, ya que solo establecerá el valor y no podrá cambiarlo cuando esté usando track por
Dependiendo de la cantidad de opciones que tenga, puede colocar sus valores en una matriz y rellenar automáticamente sus opciones como esta.
<select ng-model="somethingHere.values" ng-options="values for values in [5,4,3,2,1]">
<option value="">Pick a Number</option>
</select>
En mi caso, tuve que insertar un valor inicial solo para decirle al usuario que seleccione una opción, por lo que me gusta el siguiente código:
<select ...
<option value="" ng-selected="selected">Select one option</option>
</select>
Cuando probé una opción con el valor! = De una cadena vacía (nula), la opción fue sustituida por angular, pero, cuando se puso una opción así (con valor nulo), la selección aparece con esta opción.
Lo siento por mi mal inglés y espero poder ayudar en algo con esto.
En mi caso, ya que el valor predeterminado varía de un caso a otro en el formulario. Añado un atributo personalizado en la etiqueta de selección.
<select setSeletected="{{data.value}}">
<option value="value1"> value1....
<option value="value2"> value2....
......
en las directivas creé un script que verifica el valor y cuando angular lo llena, establece la opción con ese valor a seleccionado.
.directive(''setSelected'', function(){
restrict: ''A'',
link: (scope, element, attrs){
function setSel=(){
//test if the value is defined if not try again if so run the command
if (typeof attrs.setSelected==''undefined''){
window.setTimeout( function(){setSel()},300)
}else{
element.find(''[value="''+attrs.setSelected+''"]'').prop(''selected'',true);
}
}
}
setSel()
})
Acabo de traducir esto de coffescript sobre la marcha, al menos la parte de esto es correcta, si no la cosa del agujero.
No es la forma más sencilla, pero hazlo cuando el valor varía
En respuesta a la respuesta de Ben Lesh , debería haber esta línea
ng-init="somethingHere = somethingHere || options[0]"
en lugar de
ng-init="somethingHere = somethingHere || options[0].value"
Es decir,
<select ng-model="somethingHere"
ng-init="somethingHere = somethingHere || options[0]"
ng-options="option.name for option in options track by option.value">
</select>
Esto esta trabajando para mi
ng-selected="true"
Esto funcionó para mí.
<select ng-model="somethingHere" ng-init="somethingHere=''Cool''">
<option value="Cool">Something Cool</option>
<option value="Else">Something Else</option>
</select>
La respuesta aceptada usa ng-init , pero el docs.angularjs.org/api/ng/directive/ngInit dice que se debe evitar ng-init si es posible.
El único uso apropiado de ngInit es para crear alias propiedades especiales de ngRepeat, como se ve en la siguiente demostración. Además de este caso, debe usar controladores en lugar de ngInit para inicializar valores en un ámbito.
También puede usar ng-repeat lugar de ng-options para sus opciones. Con ng-repeat , puede usar ng-selected con ng-repeat propiedades especiales. es decir, $ índice, $ impar, $ incluso para hacer que esto funcione sin ningún tipo de 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, preferiría la respuesta de @mik-t cuando sepa qué valor seleccionar, https://.com/a/29564802/454252 , que usa ng-options track-by y ng-options sin usar ng-init o ng-repeat
Esta respuesta solo debe usarse cuando debe seleccionar el primer elemento sin saber qué valor elegir. por ejemplo, estoy usando esto para la finalización automática, lo que requiere elegir el PRIMER elemento todo el tiempo.
Mi solución a esto fue usar html para codificar mi opción predeterminada. Al igual que:
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 disculpe 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.
Necesitaba que el valor predeterminado de "Seleccionar" fuera inelegible. También necesitaba poder configurar condicionalmente una opción seleccionada por defecto.
Logré esto de la siguiente manera simplista: código JS: // Voltear estos 2 para probar el valor predeterminado seleccionado o no predeterminado con el texto predeterminado de "Seleccionar" //$scope.defaultOption = 0; $ scope.defaultOption = {clave: ''3'', valor: ''Opción 3''};
$scope.options = [
{ key: ''1'', value: ''Option 1'' },
{ key: ''2'', value: ''Option 2'' },
{ key: ''3'', value: ''Option 3'' },
{ key: ''4'', value: ''Option 4'' }
];
getOptions();
function getOptions(){
if ($scope.defaultOption != 0)
{ $scope.options.selectedOption = $scope.defaultOption; }
}
HTML:
<select name="OptionSelect" id="OptionSelect" ng-model="options.selectedOption" ng-options="item.value for item in options track by item.key">
<option value="" disabled selected style="display: none;"> -- Please Select -- </option>
</select>
<h1>You selected: {{options.selectedOption.key}}</h1>
Espero que esto ayude a alguien que tenga requisitos similares.
El "Please Select" se logró a través de la respuesta de Joffrey Outtier here .
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 here .
Si realmente desea establecer el valor que se vinculará al modelo, cambie el atributo ng-options a
ng-options="option.value as option.name for option in options"
y el Javascript para
...
$scope.selectedOption = $scope.options[0].value;
Otro Plunker here considerando lo anterior.
Si desea asegurarse de que su valor $scope.somethingHere no se sobrescriba cuando se inicializa su vista, querrá fusionar ( somethingHere = somethingHere || options[0].value ) el valor en su ng-init como tal :
<select ng-model="somethingHere"
ng-init="somethingHere = somethingHere || options[0].value"
ng-options="option.value as option.name for option in options">
</select>
Si está usando ng-options para renderizar el menú desplegable, la option tiene el mismo valor que ng-modal está seleccionada por defecto. Considera el ejemplo:
<select ng-options="list.key as list.name for list in lists track by list.id" ng-model="selectedItem">
Así que la opción que tiene el mismo valor de list.key y selectedItem , está seleccionada por defecto.
Si tiene algo en lugar de simplemente iniciar la parte de la fecha, puede usar ng-init() para declararlo en su controlador y usarlo en la parte superior de su HTML. Esta función funcionará como un constructor para su controlador, y puede iniciar sus variables allí.
angular.module(''myApp'', [])
.controller(''myController'', [''$scope'', ($scope) => {
$scope.allOptions = [
{ name: ''Apple'', value: ''apple'' },
{ name: ''Banana'', value: ''banana'' }
];
$scope.myInit = () => {
$scope.userSelected = ''apple''
// Other initiations can goes here..
}
}]);
<body ng-app="myApp">
<div ng-controller="myController" ng-init="init()">
<select ng-model="userSelected" ng-options="option.value as option.name for option in allOptions"></select>
</div>
</body>
Simplemente puedes usar ng-init esta manera
<select ng-init="somethingHere = options[0]"
ng-model="somethingHere"
ng-options="option.name for option in options">
</select>
Simplemente use ng-selected="true" siguiente manera:
<select ng-model="myModel">
<option value="a" ng-selected="true">A</option>
<option value="b">B</option>
</select>
Utilice el código de abajo para completar la opción seleccionada de 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>
Yo pondría el modelo en el controlador. Entonces la selección se predeterminará a ese valor. Ej: html:
<select ng-options="..." ng-model="selectedItem">
Controlador angular (utilizando recurso):
myResource.items(function(items){
$scope.items=items;
if(items.length>0){
$scope.selectedItem= items[0];
//if you want the first. Could be from config whatever
}
});
prueba esto en tu controlador angular ...
$ somethingHere = {name: ''Something Cool''};
Puede establecer un valor, pero está utilizando un tipo complejo y el angular buscará la clave / valor para establecer en su vista.
Y, si no funciona, intente esto: ng-options = "option.value como option.name para la opción en opciones seguimiento por option.name"
La mejor y más simple manera (actualizada)
Se explica aquí https://.com/a/37962911/5902146 <!--
Using following solution you can set initial
default value at controller as well as after change option selected value shown as default.
-->
<script type="text/javascript">
function myCtrl($scope)
{
//...
$scope.myModel=Initial Default Value; //set default value as required
//..
}
</script>
<select ng-model="myModel"
ng-init="myModel= myModel"
ng-options="option.value as option.name for option in options">
</select>