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

时间:2017-12-27 01:06:53

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

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

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

1 个答案:

答案 0 :(得分:0)

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