Durch Tabellenzeilen programmgesteuert blättern

Question

Das Ziel von this plunk ist eine Tabelle zu haben, in der die Tasten Hoch und Runter benutzt werden, um Zeilen programmgesteuert auszuwählen und durch die Tabelle zu scrollen. Die ausgewählte Zeile hat eine andere Hintergrundfarbe.

Beim Hoch-/Runterfahren verwende ich e.preventDefault(), um zu vermeiden, dass die Zeilen zweimal nach oben/unten verschoben werden. Problem ist, dass, wenn ich mit dem Scrollen nach unten anfange, die Zeilen unverändert bleiben und die ausgewählte Zeile verschwindet. Wie behebe ich das?

HTML

<div id="selector" tabindex="0" ng-keydown="scroll($event)" 
      style="width:300px;height:80px;border:1px solid gray;overflow-y:auto"> 
    <table> 
     <tr ng-repeat="item in items"> 
      <td class="td1" ng-class="{'tdactive' : $index==index }">{{item.col}}</td> 
      <td class="td1" ng-class="{'tdactive' : $index==index }">{{item.dsc}}</td> 
     </tr> 
    </table> 
</div> 

Javascript

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

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

    document.getElementById("selector").focus(); 

    $scope.items = [ {col:"aaa", dsc:"AAA1"}, {col:"bbb", dsc:"BBB2"} , {col:"ccc", dsc:"CCC3"}, 
      {col:"aaa2", dsc:"AAA21"}, {col:"bbb2", dsc:"BBB22"} , {col:"ccc2", dsc:"CCC23"}, 
      {col:"aaa2", dsc:"AAA21"}, {col:"bbb2", dsc:"BBB22"} , {col:"ccc2", dsc:"CCC23"} ]; 
    $scope.index = 0; 

    $scope.scroll = function(e) { 
     if (e.which === 40) { // down arrow 
      if ($scope.index<$scope.items.length - 1) 
       $scope.index++; 
      e.preventDefault(); 
     } 
     else if (e.which === 38) { // up arrow 
      if ($scope.index>0) 
       $scope.index--; 
      e.preventDefault(); 
     } 
    }; 
}); 

Answer 1

Zunächst einmal müssen Sie Tabellenzeile ID hinzufügen, wie id="tr-{{$index}}"

Sie können dann Ihre Scroll verhindern, wenn tr im aktuellen Ansichtsfenster ist

$scope.scroll = function(e) { 
    var parentContainer = document.getElementById("selector"); 
     if (e.which === 40) { // down arrow 
      if ($scope.index<$scope.items.length - 1) 
      { 

      var element = document.getElementById("tr-"+$scope.index); 
      if(isElementInViewport(parentContainer,element)){ 
      e.preventDefault(); 
      } 

       $scope.index++; 
      } 
     } 
     else if (e.which === 38) { // up arrow 
      if ($scope.index>0) 
      { 
      var element = document.getElementById("tr-"+$scope.index); 
      if(!isElementInViewport(parentContainer,element)){ 
      e.preventDefault(); 
      } 
       $scope.index--; 
      } 
     } 
    }; 

function isElementInViewport(parent, el) { 
    if(parent==undefined || el==undefined) 
    return false; 
    var elRect = el.getBoundingClientRect(), 
     parRect = parent.getBoundingClientRect(); 
     //console.log(elRect) 
     //console.log(parRect) 
     var elementHeight = elRect.height; 
    return (
     elRect.top >= parRect.top && 
     elRect.bottom <= parRect.bottom && 
     elRect.bottom+elementHeight<= parRect.bottom 
    ); 
} 

Working Plunker