采用了棱角分明的指令

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