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

Question

回答这个问题将需要Angularjs指令和jquery方面的专业知识

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

任何人有任何线索如何实现？

这里的plnkr： http ://plnkr.co/edit/whfYEOV1MV2Rrs4i4g7b

Answer 1

我分叉并更新了您的Plunker。 实际上，我使用自定义指令执行了相同类型的表。 如果要创建表，则应使用语义标记。 这就是为什么我修改了HTML的原因。

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

更新的柱塞

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