Multiselect Dropdown - Показать выбранные данные на кнопке

Question

У меня есть выпадающий список с множественным выбором, который выбирает данные из базы данных. Есть предварительно выбранные данные, которые мне нужно отображать при загрузке страницы вместо отображения слова "Пожалуйста, выберите". Я использую angularjs и javascript. Как я могу это сделать? Мой код выглядит так:

<div class="btn-group col-md-6 pull-right">
   <button data-toggle="dropdown" class="col-xs-12 btn btn-primary dropdown-toggle"  >---Please select---{{item.skin_type_name}}<span class="caret"></span></button>
    <ul class="dropdown-menu">
        <li ng-repeat="item in SkinType">
            <input type="checkbox" id={{item.skin_type_id}} name="NAME2" value="{{item.skin_type_id}}" ng-checked="skintypeID[item.skin_type_id]==item.skin_type_id" ng-click="skntypclk(item.skin_type_id)" ng-disabled="currreadstypepro==1" ng-required="curstyp==1"><label>{{item.skin_type_name}}</label>
        </li>
    </ul>

Я использую API для извлечения данных из базы данных, и это выглядит так:

editorService.editSkintype(id)
            .then(function(data){
                $rootScope.loadercount--;
                console.log($rootScope.loadercount);
                skintypeIDArr = {};
                angular.forEach(data.data, function(value) {
                    angular.forEach(value, function(value, key) {
                        if(key == "skin_type_id"){
                            skintype[value] = value;
                            skintypeIDArr[value] = value;
                        }
                    });
                });
                $scope.skintypeID = skintypeIDArr;
            })

Как я могу отобразить предварительно выбранное значение на кнопке вместо "Пожалуйста, выберите"? Данные могут отображаться только после того, как я отредактирую значения, но мне нужно отобразить предварительно выбранное значение при загрузке страницы. Как я могу это сделать?

Answer 1

Убедитесь, что выбранный в данный момент элемент находится в области видимости. поэтому HTML будет:

<div class="btn-group col-md-6 pull-right">
   <button data-toggle="dropdown" class="col-xs-12 btn btn-primary dropdown-toggle">{{selectedItem.skin_type_name}}<span class="caret"></span></button>
    <ul class="dropdown-menu">
        <li ng-repeat="item in SkinType">
            <input type="checkbox" id={{item.skin_type_id}} name="NAME2" value="{{item.skin_type_id}}" ng-checked="skintypeID[item.skin_type_id]==item.skin_type_id" ng-click="skntypclk(item.skin_type_id)" ng-disabled="currreadstypepro==1" ng-required="curstyp==1"><label>{{item.skin_type_name}}</label>
        </li>
    </ul>
</div>

Если это так, то в вашем контроллере вы можете просто загрузить значение по умолчанию и затем запустить вызов API:

app.controller('ctrl', function($scope) {
    $scope.selectedItem = {
        skin_type_name: "Preselected Data"
    };
    // Now run the API call...
});

Таким образом, предварительно выбранные данные будут установлены при загрузке контроллера.

Если вам нужно, чтобы он находился вне контроллера, объявите selectedItem в $rootScope вместо.