Question

我有一堆Div。我可以通过点击两个按钮（显示下一张或上一张卡片）来导航它们。感谢dfsq帮助我。但我试图通过鼠标点击并排添加键盘操作。

目前点击＆＃34;下一步＆＃34;按钮显示下一个项目＆＃34;之前＆＃34;显示上一个项目（如果有）。的 Plunker

我如何添加类似的东西按键盘＆＃34;右箭头＆＃34;将点击下一步按钮并按键盘＃34;左箭头＆＃34;将与单击上一个按钮相同。

我搜索如何做到这一点但我没有效果。我看到 This 这是我所期待的，但却没有得到我的实施方式。

任何解决方案/建议/示例都将受到高度赞赏

<div class="container">
        <div class="col-md-2-4" 
            ng-class="{'card-hide': index  > $index + 1}"
            ng-repeat="card in cards" 
            ng-style="{left: 2 * $index + 'px', top: 2 * $index + 'px', 'z-index': (cards.length - $index)}">

            <ul class="list-unstyled cs-tag-item-grp">
                <li class="clearfix" ng-repeat="value in card.cardItem">
                    <div class="pull-left">
                        {{value.keys}}
                    </div>
                </li>
            </ul>
        </div>
        <div class="keys">
          <button type="button" class="btn btn-next" ng-click="index = index < cards.length ? index + 1 : cards.length">Next</button>
          <button type="button" class="btn btn-pre" ng-click="index = index > 1 ? index - 1 : 1">Previous</button>
          {{index}}
        </div>
    </div>

Answer 1

不要使用jquery，使用ng-keydown非常简单：

<div class="keys"  ng-keydown="foo($event)">

在js：

$scope.foo = function(e) {
  if (e.which == 37) {
    $scope.index = ($scope.index < $scope.cards.length) ? ($scope.index + 1) : $scope.cards.length;
  } else if (e.which == 39) {
    $scope.index = $scope.index > 1 ? $scope.index - 1 : 1;
  }
};

然而，当div得到焦点时，这将起作用。请参阅plunk：http://plnkr.co/edit/dMSQkk6mMU8Ge9nRGekv?p=preview 当你启动它时，按箭头不做任何事情，现在按下＆＃39; next＆＃39;：按钮获得焦点，所以包含div，你可以使用箭头。

Answer 2

将其添加到控制器或创建指令并将其添加到链接功能：

angular.element(document).bind("keydown", function(event){    
      var key = event.which;
              switch(key) {
                case 37:
                    $scope.index = $scope.index > 1 ? $scope.index - 1 : 1;
                    $scope.$apply();
                    break;
                case 39:
                    $scope.index = $scope.index < $scope.cards.length ? $scope.index + 1 : $scope.cards.length
                    $scope.$apply();
                    break;
          }   
    });

<强> DEMO

指令代码：

app.directive("trackKeyDown", function () {
    return {

        restrict: "AEC",
        link: function ($scope, element, attrs) {

            angular.element(document).bind("keydown", function (event) {
                var key = event.which;
                switch (key) {
                    case 37:
                        $scope.index = $scope.index > 1 ? $scope.index - 1 : 1;
                        $scope.$apply();
                        break;
                    case 39:
                        $scope.index = $scope.index < $scope.cards.length ? $scope.index + 1 : $scope.cards.length
                        $scope.$apply();
                        break;
                }
            });

        }
    }

});

在您的HTML中：

<body ng-controller="MainCtrl" track-key-down>

<强> DEMO with Directive

无法实现键盘操作

2 个答案: