如何在angularjs中使行折叠

angular.module('myApp', ['ngAnimate'])
  .controller('myController', ['$scope', function($scope) {
    $scope.show = [];
    $scope.show[0] = false;
    $scope.show[1] = false;

    $scope.toggle = function(index) {
      $scope.show[index] = !$scope.show[index];
    };
  }]);

table {
  width: 100%;
}

.heading {
  height: 48px;
  background-color: #555;
  color: #fff;
  cursor: pointer;
}

.content {
  background-color: #eee;
  height: 150px;
  transition: all 3s ease-out;
}


/* The starting CSS styles for the enter animation */

.fade.ng-enter {
  transition: 0.5s linear all;
  opacity: 0;
}


/* The finishing CSS styles for the enter animation */

.fade.ng-enter.ng-enter-active {
  opacity: 1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.5/angular-animate.js"></script>

<div ng-app="myApp">
  <table ng-controller="myController">
    <tr class="heading">
      <td ng-click="toggle(0)">
        Heading
      </td>
    </tr>
    <tr ng-if="show[0]" class="fade">
      <td class="content">
        Content
      </td>
    </tr>
    <tr class="heading">
      <td ng-click="toggle(1)">
        Heading
      </td>
    </tr>
    <tr ng-if="show[1]" class="fade">
      <td class="content">
        Content
      </td>
    </tr>
  </table>
</div>