子どもの同じスコープ変数を持つAngularjsのネストされたアコーディン

Question

私はを使用しています.は、angularjsで書かれたネストされたアコーディオンを使用しています。ここに私のHTMLのマークアップは次のとおりです。

コントローラーで

<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がメイン非拡張（トップ）のために埋められていますアコーデオンのコンテンツも。どのように、我々は簡単にこれを避けることができますか？このため、チャートコンテナのIDが重複しているため、ハイチャートが機能しません。ng-repeat="item in CityData[sub.sId]"を使用しようとしましたが、コントローラ$scope.CityData[id] = response.data;が動作しませんでした。索引などを渡すような簡単な方法はありますか？私はangularjsの初心者であり、それを自己学習しています。

私自身の質問です。しかし、これ以外の解決策がある場合は、私に知らせてください。

Answer 1

私はこれを解決する方法を考え出しました。私はng-ifディレクティブを使ってIDを確認しました。 HTMLでは、私は

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

としてそれを使用して$scope.expandSubCallback機能で、私は以下のように、そのスコープ変数にそのIDが割り当てられます。データがあれば、条件の一致を繰り返すことになりますようにするため

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

。それが誰かに役立つかもしれないと答える。