javascript - 如何使用 Angular JS 打开/关闭单击的 div 生成内部循环？

Question

我让我的 div 生成在 ng 重复标记内，如 Accordion ，现在单击特定的 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

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

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

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

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