angularjs의 테이블을 가로 지르는 여행

Question

테이블을 표시하고 사용자가이 테이블의 특정 셀을 클릭하도록합니다. 사용자가 특정 셀을 클릭하면 강조 표시됩니다. 다음 키보드의 화살표 키를 동원하려고합니다. 즉

사용자가 "오른쪽 화살표"키를 누르면 다음 셀이 강조 표시되고 사용자가 "top-arrow"키를 누르면 현재 셀 위의 셀이 선택됩니다.

나는 여러분이 흐름을 얻는다고 믿습니다.

이것은 기능과 매우 유사합니다.

나는 거의 다 왔지만 아직 .. 누구든지 올바른 방향으로 나를 가리킨다. 여기

내 plnkr는 : http://plnkr.co/edit/Hahh4uyQ130zOS8noC3D

Answer 1

내가 '선택'이라는 모델 값 객체를보고 지침을 만들 것입니다. 이런 식으로 뭔가 :

<tr ng-repeat="element in body"> 
    <td ng-repeat="h in header" 
     my-cell="selected" 
     row="{{$parent.$index}}" 
     col="{{$index}}" 
     style="width:{{element.width}}px">{{element[h.column]}} 
    </td> 
</tr> 

UPDATE

위의 솔루션 주변의 문제는 NG-반복 그렇게 $의 scope.select의 변화가없는 한에 각 $ 인덱스 항목에 대한 범위를 격리했다입니다 다른 세포들에 의해 보여진다. 나는 $이 방출과 $ 이벤트에 사용이 해결하기 위해,보고 : 솔루션을 koolunix..tried http://plnkr.co/edit/CS21gUe3arstrgubnpTr?p=preview

angular.module("CustomTable").directive("selectMe", function($rootScope) { 
    return ({ 
    restrict: "A", 
    link: link, 
    require: "^customTable" 
    }); 

    function link(scope, element, attributes, ctCtrl) { 
    var selected, 
     mkEvent = function(r,c) { 
      scope.$emit('selectMeEvent',{ 
      row: r, 
      col: c 
      }); 
     } 

    element.on('click', function(e) { 
     mkEvent(attributes.row,attributes.col); 
    }); 

    $rootScope.$on('selectMeEvent',function(e,sObj) { 
     (sObj.row === attributes.row && 
     sObj.col === attributes.col) ? 
     element.addClass('highlight-me') : 
     element.removeClass('highlight-me'); 
    }); 
    } 
});