使用angular js不会填充下拉列表值

Question

I have a user object which I want to edit, On click of edit button few values of form are getting loaded but three values are not getting populated. I checked from service I am getting the data but it is not populating.

HTML

    <div class="col-xs-4 col-sm-4 col-md-3 col-lg-3 label-right">
        <label class="control-label">{{::'label.country'|translate}}</label>
        <label class="asterisk">*</label>
    </div>
    <div class="col-xs-8 col-sm-8 col-md-9 col-lg-9 controls">
        <select id="selectCountry" name="selectCountry" required ui-select2="select2CountrySettings" ng-model="selectedUser.country">
            <option ng-repeat="country in countryList" value="{{country.name}}" ng-selected="{{country.name == selectedUser.country}}">{{country.name}}</option>
        </select>
        <span class="help-block" ng-show="editUserForm.selectCountry.$dirty && editUserForm.selectCountry.$error.required">{{::'error.required'|translate}}</span>
    </div>
</div>

<!-- Locale -->
<div class="row control-group" ng-class="{error:editUserForm.selectLocale.$dirty && !editUserForm.selectLocale.$valid, success:editUserForm.selectLocale.$valid}">

    <div class="col-xs-4 col-sm-4 col-md-3 col-lg-3 label-right">
        <label class="control-label">{{::'label.user.locale'|translate}}</label>
        <label class="asterisk">*</label>
    </div>
    <div class="col-xs-7 col-sm-7 col-md-9 col-lg-9 controls">
        <select id="selectLocale" name="selectLocale" required class="locale-select" ui-select2="select2LocaleSettings" ng-model="selectedUser.culture">
            <option ng-repeat="locale in localeList" value="{{locale.name}}" ng-selected="{{locale.name == selectedUser.culture}}">{{locale.name}}</option>
        </select>
        <span class="help-block" ng-show="editUserForm.selectLocale.$dirty && editUserForm.selectLocale.$error.required">{{::'error.required'|translate}}</span>
    </div>
</div>

Javascript

function reloadUser() {
    loadingDataBegin();

    userDetails.getUserById(userDetails.getSelectedUser().id).then(function (response) {
        $scope.selectedUser = response.results;
    }, function (error) {
        if (error.status !== undefined && (error.status === 401 || error.status === 403)) {
            $rootScope.authentication.reAuthenticate();
        } else {
            toasty.generalError();
        }
    });
}

In $scope.selectedUser I am getting all the values from service Last three dropdowns Locale, Country and Organization is not getting populated (image) in dropdown.

Answer 1

1. Use ng-options it will make your selected item in the select boxes

How to use it

ng-options="item.id as item.name for item in names"

2. use ng-if to assign the value to the corresponding model