Question

回答这个问题需要Angularjs指令和jquery

的专业知识

我正在显示一个简单的表格。我想要的是当用户点击任何单元格时......应该选择它然后用户应该能够使用键盘来管理光标。

任何有关如何实现这一目标的线索？

plnkr： http://plnkr.co/edit/whfYEOV1MV2Rrs4i4g7b

Answer 1

我分叉并更新了您的Plunker。我实际上使用自定义指令执行相同类型的表。如果你正在做一个表，你应该使用语义标记。这就是我修改HTML的原因。

然后，我更新了您的select-me指令，向您展示我是如何完成点击的自动选择以及我如何实施箭头键导航。

Updated Plunker

<强>的layout.html

<table>
  <thead>
    <tr ng-repeat="element in header" class="header-cells" style="width:{{element.width}}px">
      <th>{{element.column}}</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="element in body" data-indexrow="{{$index}}">
      <td ng-repeat="h in header" class="custom-row" data-indexcol="{{$index}}">
        <input type="text" ng-model="element[h.column]" class="body-cell" style="width:{{h.width}}px" select-me>
      </td>
    </tr>
  </tbody>
</table>

selectMe指令（JS）

ct.directive("selectMe", function() {
  return ({
    restrict: "A",
    //    templateUrl: 'sortdropdown.html',
    link: link
  });

  function link(scope, element, attributes) {

    element.on('click', function(e) {
      element.select();
    });

    element.on('keyup', function(e) {
      var $input = angular.element(this),
          $td = $input.parent(),
          $tr = $td.parent(),
          indexrow = parseInt($tr.attr('data-indexrow'),10),
          indexcol = parseInt($td.attr('data-indexcol'),10);

      console.log(indexrow);
      console.log(indexcol);

      // up arrow
      if (e.keyCode === 38) {
        //move up
      }
      // down arrow
      if (e.keyCode === 40) {
        //move down
      }
      // left arrow
      if (e.keyCode === 37) {
        //move left
      }
      // right arrow
      if (e.keyCode === 39) {
        //move right
      }
    });
  }
});

使用angular指令使单元格在表格中可单击

1 个答案: