다중 선택 드롭 다운 - 버튼에서 선택한 데이터 표시

Question

데이터베이스에서 데이터를 가져 오는 다중 선택 드롭 다운이 있습니다. "Please 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; 
      }) 

가 어떻게 버튼에 미리 선택된 값을 표시 할 수 있습니다 대신을 선택하십시오? 데이터는 값을 편집 한 후에 만 ​​표시 할 수 있지만 필요한 것은 페이지로드시 미리 선택된 값을 표시하는 것입니다. 어떻게해야합니까?

Answer 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에 대신 선언하십시오.