採用了棱角分明的指令

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