javascript - 带有单选框的 ng-repeat 表的键盘控制

Question

为了引入一些数据结果，我使用了 boostrap-ui modal。我已经为模式和 Controller 构建了一个模板。我希望能够使用键盘在 table 上从一个元素移动到另一个元素。我想浏览单选框最重要的是，我希望能够使用键盘在单选框之间切换:箭头键

我的 table 是这样的

代码是这样的:

模态.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>

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

您需要使用 Angular 键盘库，http://chieffancypants.github.io/angular-hotkeys/

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

然后，对于向下/向上键，您可以将 $scope 函数编写为，

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