Set default value inside ngSelect
-
21-12-2019 - |
Question
I have a a ngSelect with some options in it.
<select data-ng-model="type" data-ng-change="option(type)">
<option data-ng-repeat="type in languages" value="{{type.i18n}}">
{{type.language}}
</option>
</select>
And a Controller
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" }
];
}])
I want the ngSelect to have a default option, in my case: "English". I've tried to set it to:
$scope.type = $scope.languages[0].language; // English
$scope.type = $scope.languages[0]; //The whole darn json object.
Help please?
Solution
Try this way
<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];**
}])
OTHER TIPS
how about using ngSelected
? http://docs.angularjs.org/api/ng/directive/ngSelected
<option ng-selected="$index==0"></option>
or
<option ng-selected="type.language=='English'"></option>
Working example: 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;
}]);
Notes:
- Have removed the
$translate
service for ease of reproduction. - Have changed an
ng-changed
callback to a$watch
on the$scope
but that is merely aesthetic choice. - The crucial change was that you were choosing the
lang.i18n
fortype
but were settingtype
tolang.language
, thus resulting in no matches in theoption
s list.
I don't have enough reputation to comment so I will leave it as an answer.
The Ramesh Rajendran answer is right, but you tried using a different ngOptions
syntax.
If you use the label for value in array
syntax, then you have to bind the model attribute to the entire object.
If you use the syntax in your comment, which is select as label for value in array
then you have to bind the model to the select.
In order words, his example works, and to your example on the comment to work you need to replace $scope.selectedlanguage = $scope.languages[0];
with $scope.selectedlanguage = $scope.languages[0].i18n;
Check the select directive documentation for further information
This worked for me:
$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>
live example: Plunker