如何打开/关闭点击div生成内部循环与角度js？

Question

我正在我的div生成像手风琴一样的重复标签，现在点击特定的div我只想显示/隐藏点击的div。

这是我的代码：

<div ng-repeat-start="item in Data" class="accordion">
  <table>
    <tr>
      <td class="accordion-text">{{ ::item.Name }}</td>
      <td>
        <button ng-click="closeClickedDiv()"></button>
      </td>
    </tr>
  </table>
</div>

//div 1
<div ng-show="showDiv" style="height:30px;"></div>


//div 2
<div ng-repeat-end ng-show="showDiv">
  <div class="accordion-data" ng-repeat="item1 in item.SubData">
    <table>
      <tr>
        <td>
          <div class="shot{{$index}}"></div>
          <div class=" accordion-data">{{ ::item1.subName }}</div>
        </td>
      </tr>
    </table>
  </div>
</div>

JS：

  $scope.showDiv = false;//by default all divs will be closed

 $scope.closeClickedDiv = function () {
      $scope.showDiv = !$scope.showDiv;
    };

但是这里的问题是当我点击1 div时所有div都被打开了。我想打开/关闭点击这个按钮上的div。

Answer 1

使用绑定到项目的“隐藏”属性，而不是范围：

$scope.closeClickedDiv = function (item) {
  item.hide = !item.hide;
};

<button ng-click="closeClickedDiv(item)"></button>

<div ng-hide="item.hide" style="height:30px;"></div>  

Answer 2

在ng-click上调用方法并在其中传递$index

ng-click="ShowDetailed($index)"

现在声明空数组并在ng-show中传递它

ng-show="detailedShow[$index]"

这是方法 -
它能做什么
1.点击打开，第二次点击关闭
2.如果先打开并单击第二个，它将先关闭并打开第二个。

$scope.detailedShow = [];
var lastIndex = null;
var currentIndex = null;
$scope.ShowDetailed = function(index) {
  currentIndex = index;
  if (lastIndex) {
    if (lastIndex !== currentIndex) {
      if ($scope.detailedShow[lastIndex]) {
        $scope.detailedShow[lastIndex] = !$scope.detailedShow[lastIndex];
      }
      $scope.detailedShow[index] = !$scope.detailedShow[index];
      lastIndex = currentIndex;
    } else {
      $scope.detailedShow[index] = !$scope.detailedShow[index];
    }
  } else {
    $scope.detailedShow[index] = !$scope.detailedShow[index];
    lastIndex = currentIndex;
  }
};