javascript - Angularjs 中的嵌套 Accordion 在子级中具有相同的 Scope 变量

Question

我正在使用 v-accordion ，用 angularjs 编写的嵌套 Accordion ，用于显示一些数据。这是我的 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>

在 Controller 中:

$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 未扩展 主要(顶部) Accordion 内容也正在填充。如何，我们可以轻松避免这种情况？因此，由于图表容器的 ID 重复，Highchart 无法正常工作 <div id="container{{data.id}}"></div>

我试过使用 ng-repeat="item in CityData[sub.sId]"然后在 Controller 中 $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;
}

这样，如果条件匹配，数据将重复。回答，因为它可能对某人有帮助。