我试图通过仅使用键盘的记录列表导航.当页面加载时,默认的“焦点”应该在第一个记录上,当用户单击键盘上的向下箭头时,下一个记录需要聚焦.当用户点击向上箭头时,上一个记录应该被聚焦.当用户单击“输入”按钮时,应将其转到该记录的详细信息页面.
Here’s what I have so far on Plunkr.
似乎在1.1.5(不稳定)的AngularJS中支持这一点,我们不能在生产中使用它.我目前正在使用1.0.7.我希望做这样的事情 – 关键应该在文档级别处理.当用户按某个键时,代码应该查找一个允许的键的数组.如果找到匹配项(例如下键编码),则应将焦点移动(应用.highlight css)到下一个元素.按下Enter键后,应该抓住记录,高亮css并获取进一步处理的记录ID.
谢谢！
以下是您可以选择的示例：
http://plnkr.co/edit/XRGPYCk6auOxmylMe0Uu?p=preview
http://plnkr.co/edit/XRGPYCk6auOxmylMe0Uu?p=preview
<body key-trap>
<div ng-controller="testCtrl">
<li ng-repeat="record in records">
<div class="record"
ng-class="{'record-highlight': record.navIndex == focu sIndex}">
{{ record.name }}
</div>
</li>
</div>
</body>
这是我能想到的最简单的方法.
它将一个指令keyTrap绑定到捕获keydown事件的主体
$广播消息到子范围.
元素持有者范围将捕获消息,并简单地增加或减少
focusIndex或点击进入时打开一个打开的功能.
编辑
http://plnkr.co/edit/rwUDTtkQkaQ0dkIFflcy?p=preview
现在支持,有序/过滤列表.
事件处理部分没有改变,但现在使用$index并且也过滤列表缓存技术结合起来跟踪哪个项目正在聚焦.
