我有一个多选下拉列表,用于从数据库中获取数据。我需要在页面加载时显示预选数据,而不是显示"请选择"字。我正在使用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;
})
如何在按钮上显示预选值而不是请选择?数据只能在我编辑值时显示,但我需要的是在页面加载时显示预选值。我怎么能这样做?
答案 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
。