Tastatursteuerung über eine ng-Repeat-Tabelle mit Radioboxen

Question

Ich benutze Boosterrap-ui modal, um einige Datenergebnisse einzuführen. Ich habe eine Vorlage für das Modal und den Controller erstellt. Ich möchte mit der Tastatur über die Tabelle von einem Element zum anderen wechseln können. Ich möchte durch die Radioboxen navigieren Unterm Strich habe ich die Möglichkeit, zwischen radioboxes mit der Tastatur wechseln wollen: die Pfeiltasten

Mein Tisch aussehen wie dieses

Der Code ist wie folgt:

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> 

Die Controller

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

Sie müssen sich als Winkel Tastatur Libs verwenden, http://chieffancypants.github.io/angular-hotkeys/

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

Dann für nach unten/oben-Taste, die Sie als $ scope Funktionen schreiben können,

$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

Dies ist meine Antwort:

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); 
    } 
} 

Wir können es auch mit Attributen lösen.

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>