Вложенный аккордеон в Angularjs с той же переменной сферы в дочернем объекте

Question

Я использую v-accordion, вложенный аккордеон, написанный в angularjs для отображения некоторых данных. Вот мой HTML Markup:

<v-accordion class="vAccordion--default" id="subCommodityAccordion" 
      onexpand="expandSubCallback(index, id)"> 
    <v-pane ng-repeat="sub in subcoms.subComms" id="{{ ::sub.sId }}"> 
     <v-pane-header style="margin-bottom:0;"> 
      {{sub.sName}} 
     </v-pane-header> 
     <v-pane-content> 
      <div ng-repeat="item in CityData" class="panel panel-default"> 
       <div class="panel-heading"> 
        <h4 class="panel-title"> {{item.cName}}</h4> 
       </div> 
       <div class="panel-body pbody"> 
        <v-accordion class="vAccordion--default" id="my-accordion" 
           onexpand="expandCallback(index, id)"> 
         <v-pane ng-repeat="data in item.prices" id="{{ ::data.id }}"> 
          <v-pane-header style="margin-bottom:0;"> 
           <div class="clearfix"> 
            <!-- some data binding --> 
           </div> 
          </v-pane-header> 
          <v-pane-content> 
            <!-- some data binding --> 
           <div id="container{{data.id}}"> 
           </div> 
          </v-pane-content> 
         </v-pane> 
        </v-accordion> 
       </div> 
      </div> 
     </v-pane-content> 
    </v-pane> 
</v-accordion> 

В контроллере:

$http({ 
    method: "GET", 
    url: "/api/Commodity/getSubCommoditiesOnMId", 
    params: { mId: parseInt(mainCommId) } 
}).then(function mySucces(response) { 
    $scope.subcoms = response.data; 
}, function myError(response) { }); 

$scope.CityData = null; 
$scope.expandSubCallback = function (index, id) { 
    $scope.CityData = null; 
    $http({ 
     method: "GET", 
     url: "/api/Commodity/GetCitiesOnSubcommodityId", 
     params: { SubCommId: parseInt(id) } 
    }).then(function mySucces(response) { 
     $scope.CityData = response.data; 
    }, function myError(response) { }); 
}; 

$scope.expandCallback = function (index, id) { 
    $http({ 
     method: "GET", 
     url: "/api/Commodity/GetGraphDataProductId", 
     params: { PId: parseInt(id) } 
    }).then(function mySucces(response) { 
     var data = response.data; 
     // some highcharts related code which is working fine without top level accordion. 
    }, function myError(response) { }); 
}; 

Теперь проблема, когда $scope.expandSubCallback вызвана, $scope.CityData заполняется вверх для невспененного основной (верхний) содержание аккордеона также. Как, мы можем легко избежать этого? Из-за этого Highchart не работает из-за дублированные идентификаторы для диаграммы контейнера <div id="container{{data.id}}"></div>

Я пытался использовать ng-repeat="item in CityData[sub.sId]", а затем в контроллере $scope.CityData[id] = response.data;, который не работаю. Есть ли простой способ, например, передать индекс и т. Д.? Я новичок в angularjs и сам изучаю его.

Ответил на мой вопрос. Однако, если какие-либо другие решения есть, пожалуйста, сообщите мне.

Answer 1

Я понял, как это решить. Я использовал директиву ng-if для проверки идентификатора. В HTML, я использовал его в качестве

<div ng-repeat="item in CityData" ng-if="expandedSubId == sub.sId" class="panel panel-default"> 

и в $scope.expandSubCallback функции я присвоил этот идентификатор для этой переменной области действия, как показано ниже:

then(function mySucces(response) { 
    $scope.expandedSubId = id; 
    $scope.CityData = response.data; 
} 

Так что данные будут повторяться, если условие спичек. Ответ, поскольку это может быть полезно кому-то.