각도 지시문을 사용하여 테이블에서 셀을 클릭 할 수있게 만들기

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