Angular:Keyboard Shortcut

http://angularjs.org/

by sberube

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js"></script>
<div ng-controller="MyCtrl">
    <ul ng-select-all="selectAllHandler()" ng-select-range="selectRangeHandler($ids)">
        <li ng-repeat="entry in options" data-id="{{entry.id}}" ng-class="{active: entry.ui.selected}" ng-click="clickHandler(entry)"> <a>{{entry.name}}</a>

        </li>
    </ul>
</div>

CSS

ul {
    border: 1px solid blue;
}
ul > li {
    height: 40px;
    border-bottom: 1px solid #333333;
}
ul > li.active, ul > li.active:hover {
    background-color: yellow;
}
ul > li:hover {
    background-color: #cccccc;
    cursor: pointer;
}
ul > li > a {
    width: 100%;
    line-height: 40px;
}
.ng-select-range {
    user-select: none;
    /* CSS3 (little to no support) */
    -ms-user-select: none;
    /* IE 10+ */
    -moz-user-select: none;
    /* Gecko (Firefox) */
    -webkit-user-select: none;
    /* Webkit (Safari, Chrome) */
}

JavaScript

var myApp = angular.module('myApp', []);

//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});

myApp.directive('ngSelectRange', ['$parse', '$log',

function ($parse, $log) {
    return {
        restrict: 'A',
        link: function (scope, element, attr) {
            var $lastClicked;
            var callback = $parse(attr.ngSelectRange);

            element.addClass('ng-select-range');

            element.on("click", function (event) {
                // Ignore control key clicks, it was causing a loop on the while check below.
                if (event.ctrlKey) {
                    return;
                }

                // In this case we need the actual item clicked so we can find the required data-id attribute.
                var counter = 0;
                var counterMax = 20;
                var $target = angular.element(event.target);
                while ($target.parent().data() !== element.data()) {
                    $target = $target.parent();
                    counter++;
                    if (counter > counterMax) {
                        break;
                    }
                }
                if (counter > counterMax) {
                    $log.warn('Unable to find required element for ngSelectRange');
                    return;
                }

                var $itemClicked = $target;
                if (event.shiftKey && $lastClicked) {
                    var $items = element.children();
                    var from = $items.index($lastClicked);
                    var to = $items.index($itemClicked);
                    var start = Math.min(from, to);
                    var end = Math.max(from, to) + 1;

                    var ids = [];
                    $items.slice(start, end).each(function (index) {
                        ids.push(angular.element(this).attr('data-id'));
                    });

                    scope.$apply(function () {
                       ...