Establecer el valor predeterminado dentro de ngSelect
-
21-12-2019 - |
Pregunta
Tengo un ngSelect con algunas opciones.
<select data-ng-model="type" data-ng-change="option(type)">
<option data-ng-repeat="type in languages" value="{{type.i18n}}">
{{type.language}}
</option>
</select>
y un controlador
angular.module('navigation', [])
.controller('NavCtrl',['$scope','$translate', function($scope,$translate){
$scope.option = function(type){
console.log(type) //this display the i18n value of languages
$translate.use(type);
}
$scope.languages = [
{ language: "English", i18n: "en_EN"},
{ language: "Swedish", i18n : "se_SE" }
];
}])
Quiero que ngSelect tenga una opción predeterminada, en mi caso:"Inglés".Intenté configurarlo en:
$scope.type = $scope.languages[0].language; // English
$scope.type = $scope.languages[0]; //The whole darn json object.
¿Ayuda por favor?
Solución
Pruebe de esta manera
<select ng-model="selectedlanguage" ng-change="option(this.selectedlanguage)" ng-options="i.language for i in languages">
</select>
// JS Code
angular.module('navigation', [])
.controller('NavCtrl',['$scope','$translate', function($scope,$translate){
$scope.option = function(type){
console.log(type) //this display the i18n value of languages
$translate.use(type);
}
$scope.languages = [
{ language: "English", i18n: "en_EN"},
{ language: "Swedish", i18n : "se_SE" }
];
**$scope.selectedlanguage = $scope.languages[0];**
}])
Otros consejos
¿Qué tal si se usa ngSelected
? http://docs.angularjs.org/api/ng/directive/ngselected
<option ng-selected="$index==0"></option>
o
<option ng-selected="type.language=='English'"></option>
Ejemplo de trabajo: http://plnkr.co/edit/yv8gew3IDGxjH666UmlC?p=preview
<select data-ng-model="selectedType">
<option data-ng-repeat="lang in languages" value="{{lang.i18n}}">
{{lang.language}}
</option>
</select>
js:
.controller('NavCtrl',['$scope', function($scope){
$scope.$watch('selectedType', function(type){
if (!type) return;
console.log(type) //this display the i18n value of languages
// $translate.use(type);
});
$scope.languages = [
{ language: "English", i18n: "en_EN"},
{ language: "Swedish", i18n : "se_SE" }
];
$scope.selectedType = $scope.languages[0].i18n;
}]);
Notas:
- haber eliminado el
$translate
servicio para facilitar la reproducción. - han cambiado un
ng-changed
devolución de llamada a un$watch
sobre el$scope
pero esa es una elección meramente estética. - El cambio crucial fue que estabas eligiendo el
lang.i18n
paratype
pero nos estábamos poniendotype
alang.language
, por lo que no hubo coincidencias en eloption
s lista.
No tengo suficiente reputación para comentar así que lo dejaré como respuesta.
La respuesta de Ramesh Rajendran es correcta, pero intentaste usar una diferente ngOptions
sintaxis.Si usas el label for value in array
sintaxis, entonces debe vincular el atributo del modelo a todo el objeto.Si usa la sintaxis en su comentario, que es select as label for value in array
entonces tienes que vincular el modelo a la selección.
En otras palabras, su ejemplo funciona, y para que su ejemplo en el comentario funcione debe reemplazarlo $scope.selectedlanguage = $scope.languages[0];
con $scope.selectedlanguage = $scope.languages[0].i18n;
Comprobar el seleccionar documentación directiva para mayor información
Esto funcionó para mí:
$scope.prop = { "values":
[ {name:'hello1',id:1},{name:'hello2',id:2},{name:'hello3',id:3}] };
$scope.selectedValue = 2;
<select ng-model="selectedValue" ng-options="v.id as v.name for v in prop.values">
<option selected value="">Select option</option>
</select>
Ejemplo en vivo: plunker