контроль клавиатуры над таблицей ng-repeat с радио-ящиками

Question

У меня есть функция boostrap-ui modal inorder, чтобы ввести некоторые данные. Я создал шаблон для модального и контроллера. Я хочу иметь возможность переходить от одного элемента к другому по таблице с помощью клавиатуры. Я хочу, чтобы перемещаться по радио коробки В нижней строке, я хочу, возможность переключения между radioboxes с помощью клавиатуры: клавиши со стрелками

Моя таблица выглядит следующим образом

Этот код выглядит так:

modal.html

<div class="modal-header"> 

    <h3 id="" class="modal-title"> 
     <i id="exclamation-triangle" class="fa fa-exclamation-triangle" ng-class="response.status != '200'?'':'hide-content'"></i> 
     <i id="server" class="fa fa-server" ng-class="response.status == '200'?'':'hide-content'"></i> 
     <span id="modal-title-content" ng-bind="message==''&&response.status == '200'?'Results':'Warning'"></span> 
    </h3> 
</div> 
<div class="modal-body"> 
    <div id="content" ng-class="response.status == '200'?'':'hide-content'"> 
     <table id="content_table" class="table-responsive" cellpadding="10" cellspacing="10" border="1"> 
      <tr> 
       <th></th> 
       <th>Id</th> 
       <th>Source</th> 
       <th>IsValid</th> 
       <th>Sampling Date</th> 
      </tr> 

      <tr ng-repeat="item in collection track by $index"> 
       <td> 
        <input class="dga_radio" id="dga-radio-{{$index}}" type="radio" name="dga" value="{{$index}}" ng-model="selectedDga.index" /> 
        <label for="dga-radio-{{$index}}"><span></span></label> 
       </td> 
       <td ng-repeat="(key,value) in item track by $index"> 
        {{value}} 
       </td> 
      </tr> 
     </table> 
    </div> 
    <div id="warning-msg-container" ng-class="response.status != '200'?'':'hide-content'"> 
     <span id="warning-msg">{{message}}</span> 
    </div> 
</div> 
<div class="modal-footer"> 
    <button class="btn btn-primary" type="button" ng-click="ok()" ng-disabled="selectedDga.index == '-1'">OK</button> 
    <button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button> 
</div> 

контроллеры

app.controller('ModalInstanceCtrl', function ($scope, $uibModalInstance, response, errormsg) { 

    $scope.response = response; 
    $scope.message = errormsg; 
    $scope.collection = $scope.response.data; 
    $scope.selectedDga = { 
     index: '-1' 
    } 

    //ok action 
    $scope.ok = function() { 
     console.log('$scope.selectedDga.index', $scope.selectedDga.index); 
     $uibModalInstance.close($scope.collection[$scope.selectedDga.index]); 
    }; 

    //cancel action 
    $scope.cancel = function() { 
     $uibModalInstance.dismiss('cancel'); 
    }; 

}); 

/** 
* Analytics Summary CTRL 
**/ 
app.controller('AnalyticsSummaryCTRL', ['$scope','dataFactory' ,'$uibModal', function ($scope,dataFactory,$uibModal) { 

    const warning_message_one = "Start date and end date values are invalid !"; 
    const warning_message_two = "Start date and end date are required !"; 
    const warning_message_third = "Start date is required !"; 
    const warning_message_four = "End date is required !"; 

    /** 
    * open modal popup 
    **/ 
    $scope.open = function (size) { 

     var modalInstance = $uibModal.open({ 
      animation: true, 
      templateUrl: 'Templates/modal.html', 
      controller: 'ModalInstanceCtrl', 
      size: size, 
      resolve: { 

       errormsg: function() { 

        var startDate = $("#datepicker-start").val(); 
        var endDate  = $("#datepicker-end").val(); 

        if((angular.isDefined(startDate) && startDate != '') && 
         (angular.isDefined(endDate) && (endDate != ''))) { 
         if (endDate < startDate) 
          return warning_message_one; 
         return ''; 
        }else if((!angular.isDefined(startDate) || startDate == '') && 
         (!angular.isDefined(endDate) || (endDate == ''))) { 
         return warning_message_two; 
        } 
        else if (!angular.isDefined(startDate) || startDate == '') { 
         return warning_message_third; 
        } 
        else { 
         return warning_message_four; 
        } 
       }, 
       response: function() { 

        var startDate = $("#datepicker-start").val(); 
        var endDate = $("#datepicker-end").val(); 

        return (dataFactory.getDGAList((angular.isDefined(startDate)) ? startDate : '', 
                 (angular.isDefined(endDate)) ? endDate : '')) 
         .then(function successCallback(response) { 
           return response 
         }, function errorCallback(response) { 
          return response; 
         }); 

       } 
      } 
     }); 
     modalInstance.result.then(function (selected) { 
      $scope.selected = selected; 
      (dataFactory.getDGASummary((angular.isDefined($scope.selected) ? $scope.selected["Id"] : ''))) 
       .then(function successCallback(response) { 
        console.log('success callback'); 
        generateSummaryData(response) 
       }, function errorCallback(response) { 
        console.log('error callback'); 
       }); 

      }, function() { 
       console.log('Modal dismissed at: ' + new Date()); 
     }); 

    } 

Answer 1

Вы должны использовать угловые LIBS клавиатуры, так как, http://chieffancypants.github.io/angular-hotkeys/

<body shortcut="{up: upKey, down: downKey}"> 

Затем для вниз/вверх ключа, вы можете написать $ функции объема, как,

$scope.upKey = function(){ 
if($scope.selectedDga.index >0) { 
    $scope.selectedDga.index = $scope.selectedDga.index - 1; 
    } 
} 
$scope.downKey = function(){ 
if($scope.selectedDga.index < maxItems - 1) { 
    $scope.selectedDga.index = $scope.selectedDga.index + 1; 
    } 
} 

Answer 2

Это мой ответ:

hotkeys.add({ 
    combo: 'up', 
    description: 'up key procedure', 
    callback: $scope.upKey 
}); 

hotkeys.add({ 
    combo: 'down', 
    description: 'down key procedure', 
    callback: $scope.downKey 
}); 

/** 
* upkey function 
**/ 
$scope.downKey = function() { 
    if (typeof amount !== undefined && $scope.selectedDga.index != -1) { 
     $scope.selectedDga.index = ($scope.selectedDga.index + 1) % amount; 
     $("#dga-radio-" + $scope.selectedDga.index).attr('checked', true); 
    } 


} 
/** 
* downkey function 
**/ 
$scope.upKey = function() { 
    if (typeof amount !== undefined && $scope.selectedDga.index != -1) { 
     $scope.selectedDga.index = ($scope.selectedDga.index == 0) ? amount - 1 : (($scope.selectedDga.index - 1) % amount); 
     $("#dga-radio-" + $scope.selectedDga.index).attr('checked', true); 
    } 
} 

Мы можем решить его также с помощью атрибутов.

var app = angular.module('app',['cfp.hotkeys']); 
 

 
app.controller('mainCTRL', ['$scope','hotkeys',function($scope,hotkeys){ 
 
    $scope.selectedDga = { index: '-1'}; 
 
    $scope.forward = function(){ 
 
    $scope.selectedDga.index = ($scope.selectedDga.index + 1)%3; console.log('$scope.selectedDga',$scope.selectedDga.index); 
 
    $("#dga-radio-"+$scope.selectedDga.index).attr('checked', true); 
 
    } 
 
    $scope.backward = function(){ 
 
    $scope.selectedDga.index = 
 
     ($scope.selectedDga.index == 0) ? 2 : 
 
     (($scope.selectedDga.index - 1)%3); console.log('$scope.selectedDga',$scope.selectedDga.index); 
 
    $("#dga-radio-"+$scope.selectedDga.index).attr('checked', true); 
 
    } 
 
}]);

input[type="radio"] { 
 
     display:none; 
 
    } 
 

 
    input[type="radio"] + label { 
 
     color:#f2f2f2; 
 
     font-family:Arial, sans-serif; 
 
     font-size:14px; 
 
    } 
 

 
    input[type="radio"] + label span { 
 
     display:inline-block; 
 
     width:19px; 
 
     height:19px; 
 
     margin:-1px 4px 0 0; 
 
     vertical-align:middle; 
 
     background:url(http://i68.tinypic.com/fokwly.png) 0 0 no-repeat; 
 
     cursor:pointer; 
 
    } 
 
    input[type="radio"]:checked + label span { 
 
     background:url(http://i66.tinypic.com/2ngu6aa.png) 0 0 no-repeat; 
 
    }

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<script src="https://rawgit.com/chieffancypants/angular-hotkeys/master/build/hotkeys.js"></script> 
 

 
<div id="container" ng-app="app" ng-controller="mainCTRL"> 
 
    <input class="dga_radio" id="dga-radio-0" type="radio" name="dga" value="0" ng-model="selectedDga.index" /><label hotkey="{right: forward,left: backward}" for="dga-radio-0"><span ></span></label> 
 
    <input class="dga_radio" id="dga-radio-1" type="radio" name="dga" value="1" ng-model="selectedDga.index" /> 
 
    <label for="dga-radio-1" hotkey="{right: forward,left: backward}"><span></span></label> 
 
    <input class="dga_radio" id="dga-radio-2" type="radio" name="dga" value="2" ng-model="selectedDga.index" /> 
 
    <label for="dga-radio-2" hotkey="{right: forward ,left: backward}"><span></span></label> 
 
</div>