Navigate the UI using only keyboard

Question

I\'m trying to navigate thru a list of records using only keyboard. When the page loads, the default \"focus\" should be on the first record, when the user clicks the down a

Answer 1

Here is the example what you could choose to do: http://plnkr.co/edit/XRGPYCk6auOxmylMe0Uu?p=preview

  

    

      

        {{ record.name }}
      
    
  

This is the simplest approach I could think of. It binds a directive keyTrap to the body which catches the keydown event and $broadcast message to child scopes. The element holder scope will catch the message and simply increment or decrement the focusIndex or fire an open function if hitting enter.

EDIT

http://plnkr.co/edit/rwUDTtkQkaQ0dkIFflcy?p=preview

now supports, ordered / filtered list.

Event handling part has not changed, but now uses $index and also filtered list caching technique combined to track which item is getting focused.