Question

我有一张桌子： -

<table class="arrow-nav">
        <thead>
        <tr>
            <th>ROW 1</th>
            <th>ROW 2</th>
            <th>ROW 3</th>
            <th>ROW 4</th>
            <th>ROW 5</th>
            <th>ROW 6</th>
            <th>ROW 7</th>
            <th>ROW 8</th>
            <th>ROW 9</th>
            <th>ROW 10</th>
        </tr>
        </thead>
        <tbody>
        <tr ng-repeat="row in dataList" ng-class="{'selected': isSelected($index)}" ng-click="selectRow($index)">
            <td>{{row.val1}}</td>
            <td>{{row.val2}}</td>
            <td>{{row.val3}}</td>
            <td>{{row.val4}}</td>
            <td>{{row.val5}}</td>
            <td>{{row.val6}}</td>
            <td>{{row.val7}}</td>
            <td>{{row.val8}}</td>
            <td>{{row.val9}}</td>
            <td>{{row.val10}}</td>
        </tr>
        </tbody>
    </table>

这里我选择行并尝试在按键上上下移动选定的行。我的指令代码： -

scope.selectRow = function(index){
          if(scope.selectedRowIndex == index){
             scope.selectedRowIndex = null;
             scope.rowSelected = false;
          } else {
             scope.rowSelected = true;
             scope.selectedRowIndex = index;

    }

    scope.isSelected = function (index) {
          if (scope.selectedRowIndex == index) {
            return true;
          } else {
            return false;
          }
    }

    scope.upAndDownKeys = function () {
                    $('table.arrow-nav').keydown(function(e){
                        var $table = $(this);
                        switch(e.keyCode){
                            case 38: // <Up>
                                if(scope.rowSelected ){
                                    $('#'+ scope.selectedRow).prev('tr').click();
                                }
                                break;
                            case 40: // <Down>
                                if(scope.rowSelected ){
                                    $('#'+ scope.selectedRow).next('tr').click();
                                }
                                break;
                        }
                };

   scope.upAndDownKeys();

按下按键功能正常，但所选行没有移动。有人能告诉我原因吗？

Answer 1

<!DOCTYPE html>
<html ng-app="plunker">

<head>
  <meta charset="utf-8" />
  <title>AngularJS</title>
  <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script>
  <style>
    .selected {
      color: red;
    }
  </style>
</head>


<body ng-controller="MainCtrl">
  <table class="arrow-nav">
    <thead>
      <tr>
        <th>ROW 1</th>
        <th>ROW 2</th>
        <th>ROW 3</th>
        <th>ROW 4</th>
        <th>ROW 5</th>
        <th>ROW 6</th>
        <th>ROW 7</th>
        <th>ROW 8</th>
        <th>ROW 9</th>
        <th>ROW 10</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="row in dataList" ng-class="{'selected': selectedRowIndex == $index}" ng-click="selectRow($index)">
        <td>{{row.val1}}</td>
        <td>{{row.val2}}</td>
        <td>{{row.val3}}</td>
        <td>{{row.val4}}</td>
        <td>{{row.val5}}</td>
        <td>{{row.val6}}</td>
        <td>{{row.val7}}</td>
        <td>{{row.val8}}</td>
        <td>{{row.val9}}</td>
        <td>{{row.val10}}</td>
      </tr>
    </tbody>
  </table>

</body>

<script>
  var app = angular.module('plunker', []);

  app.controller('MainCtrl', function($scope) {
    $scope.dataList = [{
      val1: '1',
      val2: '2',
      val3: '3',
      val4: '4',
      val5: '5',
      val6: '6',
      val7: '7',
      val8: '8',
      val9: '9',
      val10: '10'
    }, {
      val1: '1',
      val2: '2',
      val3: '3',
      val4: '4',
      val5: '5',
      val6: '6',
      val7: '7',
      val8: '8',
      val9: '9',
      val10: '10'
    }, {
      val1: '1',
      val2: '2',
      val3: '3',
      val4: '4',
      val5: '5',
      val6: '6',
      val7: '7',
      val8: '8',
      val9: '9',
      val10: '10'
    }];


    $scope.selectRow = function(index) {
      if ($scope.selectedRowIndex == index) {
        $scope.selectedRowIndex = null;
        $scope.rowSelected = false;
      } else {
        $scope.rowSelected = true;
        $scope.selectedRowIndex = index;

      }
    }

    $scope.isSelected = function(index) {
      if ($scope.selectedRowIndex == index) {
        return true;
      } else {
        return false;
      }
    }

    $scope.upAndDownKeys = function() {
      window.addEventListener("keydown", function(e) {
        switch (e.keyCode) {
          case 38: // <Up>
            if ($scope.selectedRowIndex > 0) {
              $scope.$apply(function() {
                $scope.selectedRowIndex = $scope.selectedRowIndex - 1;
              });
            }
            break;
          case 40: // <Down>
            if ($scope.selectedRowIndex < $scope.dataList.length - 1) {
              $scope.$apply(function() {
                $scope.selectedRowIndex = $scope.selectedRowIndex + 1;
              });
            }
            break;
        }
      });

    }

    $scope.upAndDownKeys();
  });
</script>

</html>

请找到包含此答案的工作代码段。我刚刚在某些地方更改了代码以使其正常运行。请不要将此视为一个完整的解决方案。此示例将有助于实现您要执行的操作。我已将事件侦听器更改为window对象。

Answer 2

聆听window上不在桌面上的事件。

所选行不会在键上下变化

2 个答案: