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

我有一张工作台。我可以单击每一行，这将触发事件“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与angular一起使用

以下是您所需的纯角度解决方案

步骤：

• 首先我坐了一张普通的桌子
• 然后，我使用了按键指令而不是javascript
• 然后我播放了这个事件，并在控制器中捕捉到了它
• 根据箭头的不同，即使单击该行，该行也会聚焦
  你会集中注意力的

代码：

var-app=angular.module（'myApp'，[]）；
app.controller（'customersCtrl'，函数（$scope，$http）{
$scope.names=[
{
“姓名”：“阿尔弗雷德·富特基斯特”，
“国家”：“德国”
},{
“姓名”：“Berglunds snabbköp”，
“国家”：“瑞典”
},{
“名称”：“商业中心Moctezuma”，
“国家”：“墨西哥”
},{
“名称”：“恩斯特·汉德尔”，
“国家”：“奥地利”
}
]
$scope.focusIndex=0；
$scope.open=函数（索引）{
$scope.focusIndex=索引
};
$scope.keys=[]；
$scope.keys.push（{code:13，action:function（）{$scope.open（$scope.focusIndex）；}}）；
$scope.keys.push（{code:38，action:function（））{
如果（$scope.focusIndex==0）
{
$scope.focusIndex=（$scope.names.length-1）；
}
否则{
$scope.focusIndex--；
}
}});
$scope.keys.push（{code:40，action:function（））{
如果（$scope.focusIndex==（$scope.names.length-1））
{
$scope.focusIndex=0；
}
否则{
$scope.focusIndex++；
}
}});
$scope.$on（'keydown'，函数（msg，obj）{
var代码=对象代码；
console.log（代码）
$scope.keys.forEach（函数（o）{
if（o.code！==code）{return；}
o、 动作（）；
$scope.$apply（）；
});
});
});
应用指令（'keyPress'，函数（）{
返回函数（范围、元素）{
元素绑定（'keydown'，函数（事件）{
作用域。$broadcast（'keydown'，{code:event.keyCode}）；
});
};
});

表，td{
边框：1px纯灰；
边界塌陷：塌陷；
填充物：5px；
}
/*风格就在这里*/
.主动{
高度：25px；
背景颜色：浅灰色；
利润率：10px；
填充：10px；
宽度：200px；
}
.活动亮点{
高度：50px；
背景颜色：蓝色；
利润率：10px；
填充：10px；
宽度：200px；
颜色：#fff；
}
{{x.Name}
{{x.国家}
我可以问你更多吗：我想知道为什么我的指令不起作用，直到我在html代码中遗漏了“按键”：但是为什么angular知道按键是“按键”的指令？对我来说，这条线是否应该是：不带“-”。或者，为什么写得不对，这样就可以清楚地知道我指的是哪个指令
    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");
    }

}