使用ng-repeat扩展和折叠表格

Question

我第一次打开一个部分是因为我有一些记录。接下来，我打开第二部分而没有关闭第一部分，这时第一部分的数据会自动清除。我使用了名为studentPracticeProgress的单个变量名。我想维护单个变量，因为节名和id可能会有所不同。

<ul ng-if="shows" class="domain-list list-margin">
  <li ng-repeat-start="theDomain in domains" id="domain{{$index}}Id">
    <a href="javascript:;" id="showTracks_id" class="name domain-image-position" ng-click="getStudentPracticeProgress($index,theDomain); expanded = !expanded" expand>
      <span><i class="{{DomainIconCC(theDomain);}}" style="font-size: 1.495rem;"></i>
        <span class="domain-names">{{domainName[theDomain]}}
          <span ng-show="expanded" class="arrow arrow-rotates-90"></span><span ng-show="!expanded" class="arrow arrow-rotates"></span></span></span>
    </a>
  </li>
  <div class="tr-div" ng-repeat-end ng-show="expanded">
    <table class="striped" style="font-size: 14px;width: 102%; border: 1px #cfd8dc solid;">
      <thead>
        <tr class="table-border-top">
          <th class="progress-text-align">Id</th>
          <th class="progress-title-align">Title</th>
          <th>Total Qus</th>
          <th>Correct</th>
          <th>Wrong</th>
          <th>Time Spent</th>
          <th>Date</th>
          <th>Level</th>
        </tr>
        <tr ng-repeat="item in studentPracticeProgress[$index]" class="ng-scope table-border-top">
          <td class="progress-text-align">
            {{item.cc_ids[0]}}
          </td>
          <td class="progress-title-align">
            {{item.cc_title}}
          </td>
          <td>
            {{item.stats.right+item.stats.wrong}}
          </td>
          <td>
            {{item.stats.right}}
          </td>
          <td>
            {{item.stats.wrong}}
          </td>
          <td><span data-toggle="tooltip" title="Average Time Spent By A Student 00:00(hh:mm)">
              {{item.diplay_time}}
            </span></td>
          <td>
            {{item.date_created|date:'MMM dd'}}
          </td>
          <td>
            {{item.level}}
          </td>
        </tr>
      </thead>
    </table>
  </div>
</ul>  

$scope.getStudentPracticeProgress = function(idx, domain) {
  $scope.studentPracticeProgress = [];
  studySessionService.getStudySession(
    {
      userid: $scope.studentId,
      subject: localStorage.getItem("subject"),
      domain: domain,
      type: "practice"
    },
    function(students) {
      students.forEach(function(element) {
        var total = element.stats.right + element.stats.wrong;
        if (total == 0) {
          total = 1; //to avoid a divide by zero situation
        }
        var score = element.stats.right * 100 / total;
        if (score > 80) {
          element.level = "Master"
        } else if (score > 60) {
          element.level = "Intermediate"
        } else if (score > 30) {
          element.level = "Average"
        } else {
          element.level = "Beginner";
        }
        element.diplay_time = SecondsTohhmmss(element.stats.time)
        $scope.studentPracticeProgress[idx] = students;
      });
    },
    function(error) {
      $scope.notification = NOTIFICATION.error("An Error has occurred! ", error.message);
    });
}

tutorApp.directive('expand', function() {
  return {
    controller: ['$scope', function($scope) {
      $scope.$on('onExpandAll', function(event, args) {
        $scope.expanded = args.expanded;
      });
    }]
  };
});