多选下拉菜单 - 在按钮上显示所选数据答案

【问题标题】：Multiselect Dropdown - Display Selected Data on Button多选下拉菜单 - 在按钮上显示所选数据
【发布时间】：2017-12-27 01:06:53
【问题描述】：

我有一个从数据库中获取数据的多选下拉菜单。我需要在页面加载时显示预选数据，而不是显示“请选择”字样。我正在使用 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;
            })

如何在按钮上显示预选值而不是请选择？数据只能在我编辑值后显示，但我需要在页面加载时显示预选值。我该怎么做？

【问题讨论】：

标签： javascript html angularjs drop-down-menu multi-select

【解决方案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...
});

这样在加载控制器时会设置预选数据。

如果您需要它在控制器之外，则改为在 $rootScope 中声明 selectedItem。

【讨论】：