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

Question

为了介绍一些数据结果，我使用了boostrap-ui 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

您需要使用角键盘库作为， 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;
   }
}

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>