javascript - 从 session 存储中打开折叠

Question

我需要从 session 存储中打开折叠。 首先，我用 ng-repeat 来做这个。当我们切换某些行时，我将 $index 并设置为 sessionStorage。 刷新后，我想打开同一行(保存在sessionStorage中)

这是当我们单击该行并从存储中调用 init 时保存到 sessionStorage 的函数

if(sessionStorage.length){
                $scope.setInterpretation = 'interpretation' + sessionStorage.getItem("indexOfOpenedRow");
            }
$scope.getIndex = function(indexOfRow){
            $scope.fromSessionStorage = false;
            sessionStorage.removeItem("indexOfOpenedRow");
            sessionStorage.setItem("indexOfOpenedRow", indexOfRow);

            $scope.setInterpretation = 'interpretation' + indexOfRow;

        }

这是我在 HTML 中的操作方法

<tbody ng-repeat="data in datas | filter:search">
   <tr>
       <td>
           <a href="" data-toggle="collapse" data-target="{{setInterpretation}}" ng-model="$index" ng-click="getIndex($index)"><span class="glyphicon" ng-class="{ 'glyphicon-chevron-right': !group.$hideRows, 'glyphicon-chevron-down': group.$hideRows }"></span>
           </a>
       </td>
       <td>Test</td>
       <td>Test</td>
   </tr>
   <tr class="collapse" id="{{setInterpretation }}">
       <td>Test</td> 
       <td>Test</td> 
       <td>Test</td> 
   </tr>
</tbody>

但是，这不起作用，因为当我尝试从 sessionStorage 设置时，每个 ng-repeat 行都会获得相同的 ID。

如何解决这个问题？谢谢

Answer 1

您可以尝试考虑下面的代码。要跟踪用户上次 session 的行扩展是否会保留屏幕，下面的代码可能会帮助您实现相同的目标。

另请查看this plunker link对于您给定的示例工作场景。

Controller :

if(sessionStorage.length > 0){
  $scope.tableData = JSON.parse(sessionStorage.getItem("indexOfOpenedRow"));
}
$scope.getIndex = function(indexOfRow){
  $scope.tableData[indexOfRow].show = !$scope.tableData[indexOfRow].show;
  sessionStorage.removeItem("indexOfOpenedRow");
  sessionStorage.setItem("indexOfOpenedRow", JSON.stringify($scope.tableData));
}

模板:

<tbody ng-repeat="tab in tableData track by $index">
   <tr>
      <td>
          <button ng-click="getIndex($index)">
            {{ tab.show ? '-' : '+'}}
          </button>
      </td>
      <td>{{tab.col1}}</td>
      <td>{{tab.col2}}</td>
      <td>{{tab.col3}}</td>
   </tr>
   <tr class="collapse" ng-if="tab.show">
      <td></td> 
      <td>Test</td> 
      <td>Test</td> 
      <td>Test</td> 
   </tr>
</tbody>