Question

（Angularjs）我有一张工作台。我可以点击每一行，它会触发事件“clickOnTableRow（d）”（由于ng-click而可能）。

现在，我希望能够使用向上和向下键转到下一行。所以，这是我的问题，我是javascript angularjs的新手，并且不知道我怎么能去下一行。

我没有发布clickOnTableRow（d）的全部功能，因为我认为现在不需要它，只会导致混乱。

HTML代码：

    <div id="divTable" style="overflow-y:scroll; height:200px;">
<table class="table table-condensed"
       id=""
       name="">
    <thead>
    <tr>
        <th>Startn.</th>
        <th>Titel</th>
        <th>Points</th>
        <th>Disciplin</th>
        <th>Age-Group</th>
        <th>Category</th>
        <th>Assessment</th>
    </tr>
    </thead>
    <tbody>
    <tr ng-repeat="d in danceList | orderBy:'virtuelleStartnummer'"
        ng-click="clickOnTableRow(d)"
        ng-class="{selected: d.startnummer === selectedStartnummer}"> <!-- das ganze d (Startnummer usw) wird im TanzObj gespeichert und dem Controller in der Funktion übergeben.-->
        <td> {{d.startnummer}}</td>
        <td> {{d.titel}}</td>
        <td> {{d.points}} </td>
        <td> {{d.disziplin}}</td>
        <td> {{d.altersklasse}}</td>
        <td> {{d.kategorie}}</td>
        <td> {{d.wertungsklasse}}</td>
    </tr>
    </tbody>
</table>
</div>

Javascript代码：

    document.onkeydown = checkKey;
function checkKey(e) {

    e = e || window.event;

    if (e.keyCode === 38) {
        // up arrow
        console.log("hello up arrow");
    }
    else if (e.keyCode === 40) {
        // down arrow
        console.log("hello down arrow");
    }
    else if (e.keyCode === 37) {
        // left arrow
        console.log("hello left arrow");
    }
    else if (e.keyCode === 39) {
        // right arrow
        console.log("hello right arrow");
    }

}

由于

Answer 1

更好不要使用带角度的Javascript

以下是 PURE ANGULAR WAY

所需的解决方案

<强>步骤：

首先我采取了正常的表格
然后，我使用了按键指令而不是javascript。
然后我播放了该事件并将其锁定在控制器中
根据箭头，行将被聚焦甚至点击它将聚焦

<强>代码：

＆＃13;

var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
     $scope.names = [
       {
            "Name" : "Alfreds Futterkiste",
            "Country" : "Germany"
        },{
            "Name" : "Berglunds snabbköp",
            "Country" : "Sweden"
        },{
            "Name" : "Centro comercial Moctezuma",
            "Country" : "Mexico"
        },{
            "Name" : "Ernst Handel",
            "Country" : "Austria"
        }
    ]
    
    $scope.focusIndex = 0;
  
  $scope.open = function ( index ) {
    $scope.focusIndex = index
  };
  
  $scope.keys = [];
  $scope.keys.push({ code: 13, action: function() { $scope.open( $scope.focusIndex ); }});
  $scope.keys.push({ code: 38, action: function() {
  if($scope.focusIndex == 0)
  {
  	$scope.focusIndex = ($scope.names.length - 1); 
  }
  else{
  $scope.focusIndex--;
  }
  }});
  $scope.keys.push({ code: 40, action: function() {
  if($scope.focusIndex == ($scope.names.length - 1))
  {
  	$scope.focusIndex = 0; 
  }
  else{
  $scope.focusIndex++;
  }
  }});
  
  $scope.$on('keydown', function( msg, obj ) {
    var code = obj.code;
    console.log(code)
    $scope.keys.forEach(function(o) {
      if ( o.code !== code ) { return; }
      o.action();
      $scope.$apply();
    });
  });
  
  
});
app.directive('keyPress', function() {
  return function( scope, elem ) {
    elem.bind('keydown', function( event ) {
      scope.$broadcast('keydown', { code: event.keyCode } );
    });
  };
});

＆＃13;

<!DOCTYPE html>
<html>
<style>
table, td  {
  border: 1px solid grey;
  border-collapse: collapse;
  padding: 5px;
}
/* Styles go here */
.active {
    height: 25px;
    background-color: lightgray;
    margin: 10px;
    padding: 10px;
    width: 200px;
}
.active-highlight {
    height: 50px;
    background-color: blue;
    margin: 10px;
    padding: 10px;
    width: 200px;
    color: #fff;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body  ng-app="myApp" ng-controller="customersCtrl" key-press>

<div> 

<table>
  <tr ng-repeat="x in names" class="active"
          ng-class="{'active-highlight': $index == focusIndex }" ng-click="open($index)">
    <td>
    {{ x.Name }}</td>
    <td>
    {{ x.Country }}</td>
  </tr>
</table>

</div>


</body>
</html>

＆＃13;

请运行以上代码段

Here is a WORKING DEMO

Angularjs / Javascript使用向上键选择下一行

1 个答案: