Angular JS下拉列表未显示ng-selected =“selected”的值

Question

I'm new to AngularJS, facing problem with ng-option , selected='selected' is not showing in the combobox.

Below is the select HTML element and data source:

<select class="form-control" id="numberOfRows" ng-model="prefferedLanguage"
       ng-change="changePreference(prefferedLanguage)">
    <option my-repeat="language in sirCommonService.LOVData.LanguagePreference" value="{{language.LanguageISOCode}}"
            ng-selected="{{language.IsDefault == true}}">
        {{language.LanguageName}}
    </option>
</select>

sirCommonService.LOVData.LanguagePreference :

"LanguagePreference": [
    {
      "LanguageISOCode": "EN",
      "LanguageName": "English",
      "IsDefault": true
    },
    {
      "LanguageISOCode": "FR",
      "LanguageName": "French",
      "IsDefault": false
    }
  ]

I want to set combo box value depending on the Property "IsDefault" of the Model on page Load. But it is not working.

Generated HTML is:

<select class="form-control ng-pristine ng-valid ng-empty ng-touched" id="numberOfRows" ng-model="prefferedLanguage" ng-change="changePreference(prefferedLanguage)"><option value="? undefined:undefined ?"></option>
    <!-- ngRepeat: language in sirCommonService.LOVData.LanguagePreference --><option my-repeat="language in sirCommonService.LOVData.LanguagePreference" value="EN" ng-selected="true" ng-repeat="language in sirCommonService.LOVData.LanguagePreference" class="ng-binding ng-scope" selected="selected">
        English
    </option><!-- end ngRepeat: language in sirCommonService.LOVData.LanguagePreference --><option my-repeat="language in sirCommonService.LOVData.LanguagePreference" value="FR" ng-selected="false" ng-repeat="language in sirCommonService.LOVData.LanguagePreference" class="ng-binding ng-scope">
        French
    </option><!-- end ngRepeat: language in sirCommonService.LOVData.LanguagePreference -->
</select>

Answer 1

The best way to handle the select is by using the select directive with ngOptions

https://docs.angularjs.org/api/ng/directive/select https://docs.angularjs.org/api/ng/directive/ngOptions

<select ng-options="item as item.label for item in items track by item.id" ng-model="selected"></select>

I had the same problem as you before. Its just not working well with ngRepeat and options.

Answer 2

i've just created a plnkr here: https://plnkr.co/edit/rCQzEhojZP0iHvoI1KlO?p=preview

you should use select with ng-options , something like this

 <select
        ng-model="defaultlanguage" 
        ng-options="lan.LanguageISOCode for lan in LanguagePreference">
 </select>

Answer 3

ng-selected directive takes an expression as a parameter. So, change your code as following :

ng-selected="language.IsDefault == true"