Question

如何在Angular.JS中进行切换，以便在再次单击同一div时打开和关闭div。现在它执行动作所以打开div但是每当我再次点击它时，div需要再次关闭。

<a ng-href ng-click="openAccordionRow(champion.clean)"> Zerg </a>

然后打开：

<div ng-show="isAccordionOpen(champion.clean)">
  info
</div>

JS：

  $scope.activeRows = "";
  $scope.isAccordionOpen = function(row) {
    if ($scope.activeRows === row) {
      return true;
    } else {
      return false;
    }
  }

  $scope.openAccordionRow = function(row) {
    $scope.activeRows = row;
  }

这里的问题是，再次按下时，同一个点击的div不会关闭。

Answer 1

目前，您的代码甚至没有尝试折叠该行的任何内容。您可以将代码更改为此。

<强> HTML ：

<a ng-href ng-click="toggleAccordionRow(champion.clean)"> Zerg </a>

<强>的JavaScript ：

  $scope.activeRows = "";
  $scope.isAccordionOpen = function(row) {
    if ($scope.activeRows === row) {
      return true;
    } else {
      return false;
    }
  }

  $scope.toggleAccordionRow = function(row) {
    $scope.activeRows = $scope.isAccordionOpen(row) ? "" : row;
  }

Answer 2

如果你想切换。只需使用这些代码。

$scope.activeRows = true // Am setting this for default to show
ng-click="$scope.activeRows = !$scope.activeRows" // change ng-click event
ng-show = "$scope.activeRows" // bind directly $scope.activeRows to show.

Answer 3

做这种事情的简单方法是下面的方式

<a ng-href ng-click="hideBar =!hideBar"> Zerg </a>

<div ng-show="hideBar">
  info
</div>

在Angular中切换div

3 个答案: