Focus on a row within ng-repeat

Hi All,

I came up with an intersting scenario wherein I needed to focus on a particular row in a table with some action like click on a link or a button. Ideally focusing means, if row is somewhere at the bottom or not visible at all, It should be scrolled to the center of the page on UI. This is a not a big requirement but I thought it will be good to share this to save some time of my friends like you.

To make it short and simple, I will quickly tell that I am using AngularJS specifically ng-repeat to prepare my table.

Table's code:

<table class="slds-table slds-table--bordered slds-table--cell-buffer">
    <thead>
        <!-- column headers-->
    </thead>
    <tbody>
    	<! -- passing $index to row id's to distinguish them -->
        <tr ng-repeat="item in items track by $index" id="{{$index}}">
        </tr>
    </tbody>
</table>
<! -- input text to get the row id and focus it on page -->
<input type="text" ng-model="rowNumber" placeholder="enter row number to focus" ng-blur="focusRow(rowNumber)"/>

Controller's code

$scope.focusRow = function(rowId){
  $timeout(function() {
    $location.hash(rowId);
    $anchorScroll();
  });
}

By using above code, Angular will automatically focus the row with passed row Id on center of page. This is plain, simple and something supported by Angular itself. We don't need to go for any workarounds for it.

Happy Coding ;)