2017-12-27 10 views
0

データベースからデータを取得するマルチ選択ドロップダウンがあります。 「選択してください」という単語を表示する代わりに、ページの読み込みに表示する必要があるデータがあらかじめ選択されています。私は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を使用していますが、それはこの1のようになります。

私はボタンの上に予め選択された値を表示するにはどうすればよい
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

現在選択されている項目がスコープに含まれていることを確認してください。その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に宣言してください。

関連する問題