我有一张桌子：
<table class="arrow-nav">
<thead>
<tr>
<th>ROW 1</th>
<th>ROW 2</th>
<th>ROW 3</th>
<th>ROW 4</th>
<th>ROW 5</th>
<th>ROW 6</th>
<th>ROW 7</th>
<th>ROW 8</th>
<th>ROW 9</th>
<th>ROW 10</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in dataList" ng-class="{'selected': isSelected($index)}" ng-click="selectRow($index)">
<td>{{row.val1}}</td>
<td>{{row.val2}}</td>
<td>{{row.val3}}</td>
<td>{{row.val4}}</td>
<td>{{row.val5}}</td>
<td>{{row.val6}}</td>
<td>{{row.val7}}</td>
<td>{{row.val8}}</td>
<td>{{row.val9}}</td>
<td>{{row.val10}}</td>
</tr>
</tbody>
</table>
在这里，我正在选择行，并尝试在按键上上下移动选定的行。
我的指令代码：
scope.selectRow = function(index){
if(scope.selectedRowIndex == index){
scope.selectedRowIndex = null;
scope.rowSelected = false;
} else {
scope.rowSelected = true;
scope.selectedRowIndex = index;
}
scope.isSelected = function (index) {
if (scope.selectedRowIndex == index) {
return true;
} else {
return false;
}
}
scope.upAndDownKeys = function () {
$('table.arrow-nav').keydown(function(e){
var $table = $(this);
switch(e.keyCode){
case 38: // <Up>
if(scope.rowSelected ){
$('#'+ scope.selectedRow).prev('tr').click();
}
break;
case 40: // <Down>
if(scope.rowSelected ){
$('#'+ scope.selectedRow).next('tr').click();
}
break;
}
};
scope.upAndDownKeys();
按键时功能正常，但所选行没有移动，有人可以告诉我原因吗？
最佳答案
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS</title>
<script data-require="[email protected]" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script>
<style>
.selected {
color: red;
}
</style>
</head>
<body ng-controller="MainCtrl">
<table class="arrow-nav">
<thead>
<tr>
<th>ROW 1</th>
<th>ROW 2</th>
<th>ROW 3</th>
<th>ROW 4</th>
<th>ROW 5</th>
<th>ROW 6</th>
<th>ROW 7</th>
<th>ROW 8</th>
<th>ROW 9</th>
<th>ROW 10</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in dataList" ng-class="{'selected': selectedRowIndex == $index}" ng-click="selectRow($index)">
<td>{{row.val1}}</td>
<td>{{row.val2}}</td>
<td>{{row.val3}}</td>
<td>{{row.val4}}</td>
<td>{{row.val5}}</td>
<td>{{row.val6}}</td>
<td>{{row.val7}}</td>
<td>{{row.val8}}</td>
<td>{{row.val9}}</td>
<td>{{row.val10}}</td>
</tr>
</tbody>
</table>
</body>
<script>
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.dataList = [{
val1: '1',
val2: '2',
val3: '3',
val4: '4',
val5: '5',
val6: '6',
val7: '7',
val8: '8',
val9: '9',
val10: '10'
}, {
val1: '1',
val2: '2',
val3: '3',
val4: '4',
val5: '5',
val6: '6',
val7: '7',
val8: '8',
val9: '9',
val10: '10'
}, {
val1: '1',
val2: '2',
val3: '3',
val4: '4',
val5: '5',
val6: '6',
val7: '7',
val8: '8',
val9: '9',
val10: '10'
}];
$scope.selectRow = function(index) {
if ($scope.selectedRowIndex == index) {
$scope.selectedRowIndex = null;
$scope.rowSelected = false;
} else {
$scope.rowSelected = true;
$scope.selectedRowIndex = index;
}
}
$scope.isSelected = function(index) {
if ($scope.selectedRowIndex == index) {
return true;
} else {
return false;
}
}
$scope.upAndDownKeys = function() {
window.addEventListener("keydown", function(e) {
switch (e.keyCode) {
case 38: // <Up>
if ($scope.selectedRowIndex > 0) {
$scope.$apply(function() {
$scope.selectedRowIndex = $scope.selectedRowIndex - 1;
});
}
break;
case 40: // <Down>
if ($scope.selectedRowIndex < $scope.dataList.length - 1) {
$scope.$apply(function() {
$scope.selectedRowIndex = $scope.selectedRowIndex + 1;
});
}
break;
}
});
}
$scope.upAndDownKeys();
});
</script>
</html>请找到带有此答案的工作代码段。我只是在某些地方更改了您的代码以实现此功能。请不要将其视为完整的解决方案。此示例将有助于实现您要执行的操作。我已将事件监听器更改为
window对象。关于javascript - 选定的行在上下键上没有变化，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/45008964/