刷新表格數據時，在頂部顯示第一行

In this plunk我有一個標有「Set 1」和「Set 2」兩個按鈕的表格。單擊第一個按鈕時，表格數據將變爲第一組。點擊第二個按鈕後，表格數據將變爲第二組。刷新表格數據時，在頂部顯示第一行

這工作正常，但我需要的是，如果用戶向下滾動，當數據刷新時，也需要在頂部設置表的第一行。任何想法如何使這項工作？

HTML

<div style="width:150px;height:80px;border:1px solid gray;overflow-y:auto"> 
    <table> 
     <tr ng-repeat="item in items"> 
      <td>{{item.col}}</td> 
     </tr> 
    </table> 
</div> 
<br>   
<button ng-click="showSet1()">Set 1</button> 
<button ng-click="showSet2()">Set 2</button>

的Javascript

var app = angular.module('app', []); 

app.controller('ctl', function($scope) { 

    $scope.showSet1 = function(){ 
     $scope.items = [ {col:"a1"}, {col:"b1"}, {col:"c1"}, 
         {col:"d1"}, {col:"e1"}, {col:"f1"}, 
         {col:"g1"}]; 
    }; 

    $scope.showSet2 = function(){ 
     $scope.items = [ {col:"a2"}, {col:"b2"}, {col:"c2"}, 
         {col:"d2"}, {col:"e2"}, {col:"f2"}, 
         {col:"g2"} ]; 
    }; 

    $scope.showSet1(); 

});

來源

2017-03-17 ps0604

在折角，您可以使用$anchorScroll滾動到特定元素。

以下是您可以做的事情。首先，動態ID屬性添加到<tr>就像這樣：

<tr id="row{{$index}}" ng-repeat="item in items"> 
    <td>{{item.col}}</td> 
</tr>

然後創建一個函數進行如下的滾動到第一行：

$scope.scrollToTop = function() { 
    $location.hash('row0'); 
    $anchorScroll(); 
}

然後，只需調用從兩者的功能，此功能（即showSet1和showSet2）。

這是updated plunker

來源

2017-03-17 03:49:27 tanmay

刷新表格數據時，在頂部顯示第一行

回答

相關問題