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

Posted 2021-05-05

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

如何在按钮上显示预选值而不是请选择？数据只能在我编辑值时显示，但我需要的是在页面加载时显示预选值。我怎样才能做到这一点？

答案

确保在范围中包含当前选定的项目。所以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。