在angularjs中穿越桌子

Question

我正在顯示一個表並讓用戶單擊此表中的特定單元格。當用戶點擊一個特定的單元格時，我會突出顯示它。 接下來，我正試圖調動鍵盤上的箭頭鍵。即

當用戶按下「向右箭頭」鍵時，下一個單元格應該高亮顯示，如果用戶按下「頂部箭頭」鍵，應選擇當前單元格上方的單元格。

我相信你們會得到流量。

這是超類似的功能。

我幾乎在那裏，但還沒有..任何人都指向正確的方向。

我這裏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變化不是由其他細胞看到。爲了解決這個問題我用$發射和$上的事件，看看：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'); 
    }); 
    } 
});