Set default value inside ngSelect

问题

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?

回答1:

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];**
}])

回答2:

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>

回答3:

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 for type but were setting type to lang.language, thus resulting in no matches in the options list.

回答4:

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

回答5:

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

来源：https://stackoverflow.com/questions/22007196/set-default-value-inside-ngselect