使用Angular进行切换或手风琴效果

Question

首先，我是角色新手，所以我无法弄清楚如何实现以下场景。

点击后，我可以显示/隐藏每行的相关div。但是如果工具提示是打开的（让我们说它在第一行打开）在一行中，我点击另一行（假设我点击第3行），那么打开的工具提示（从第1行）不会隐藏。请帮帮我。

以下是我的代码，

<div ng-repeat="breakdown in CallFullbreakdown" class="list-items-row">
    <div class="mob-number"><a data-ng-click="toggleDetails = !toggleDetails">{{breakdown.number}}</a></div>
    <div class="call-date"><a data-ng-click="toggleDetails = !toggleDetails">{{breakdown.dateandtime}}</a></div>
    <div class="call-cost text-align-right"><a data-ng-click="toggleDetails = !toggleDetails">£{{breakdown.cost}} <span class="chevron-style icon-up-chevron"></span></a></div>
    <!-- Start Call Breakdown Tooltip -->
    <div class="row position-relative call-breakdown" data-ng-show="toggleDetails">
        <span class="sprite arrow grey-arrow call-breakdown-arrow"></span>
        <div class="mob-number">
          <span class="bolder">Call type</span>
          <span>{{breakdown.callType}}</span>
        </div>
        <div class="call-date">
          <span class="bolder">Destination</span>
          <span>{{breakdown.destination}}</span>
        </div>
        <div class="call-cost text-align-right">
            <span class="bolder">Duration</span>
            <span>{{breakdown.duration}}</span>
        </div>
    </div>
    <!-- End Call Breakdown Tooltip -->
</div>

Answer 1

只需切换一个toggleDetails变量，就可以在打开另一个时关闭一个。而是在控制器中创建对故障打开的引用。

然后，使toggleDetails一个函数将故障切换为参数。然后，该函数可以控制当前显示的详细信息。

在BreakdownController中：

(...)
var activeBreakdown;
$scope.toggleDetails = function(breakdown) {
  if (breakdown === activeBreakdown) {
    // Breakdown is defined, so activeBreakdown must be as well
    activeBreakdown.showDetails = !activeBreakdown.showDetails;
  } else {
    if (activeBreakdown) {
      // Make sure the currently active breakdown is closed
      activeBreakdown.showDetails = false;
    }
    // If a new breakdown is selected, it needs to be opened
    breakdown.showDetails = true;
    // And put on activeBreakdown so it can be closed on the next toggle
    activeBreakdown = breakdown;
  }
};
(...)

HTML：

<div ng-repeat="breakdown in callFullBreakdown" class="list-items-row">
  <!-- Breakdown row stuff here... -->
  <!-- Start Call Breakdown Tooltip -->
  <div class="row position-relative call-breakdown" style="background-color: #a0a0a0" ng-show="breakdown.showDetails">
    <!-- Details/tooltip here -->
  </div>
  <!-- End Call Breakdown Tooltip -->
  <hr />
</div>

请参阅此Plunk

此外，为了节省ng-clicks（因此也可以减少更改内容时可能出现的错误量），看看是否可以将行部分（数字，日期和时间，成本）包装在另一个元素中并放置ng-click那里。

Answer 2

这是第一件碰到我眼睛的事情：

data-ng-show="toggleDetails" data-ng-hide="!toggleDetails"

ng-show用于显示AND hidding和element，具体取决于分配给它的变量的布尔值。 在同一个元素上使用它们只是一团糟。

此外，您已经在整个地方传播了ng-show / hide。无法在容器级别完成？

理想情况下，你应该给我们一个关于jsfiddle的工作样本，我们将从那里修复它。