<!DOCTYPE html>
<html ng-app="ccTable">
<head>
<link data-require="bootstrap@*" data-semver="4.0.5" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />
<script data-require="bootstrap@*" data-semver="4.0.5" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>
<script data-require="angular.js@1.6.2" data-semver="1.6.2" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="MainCtrl">
{{name}}
<table class="table">
<thead>
<tr style="display:block; width:100%">
<th class="id_area">#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody id='content-area' class="table_body" cc-row-selector collection="data" selected-row="selectedRow">
<tr ng-repeat="item in data" ng-class="{'selected':$index == selectedRow}" ng-click="rowSelect($index)">
<th scope="row" class="id_area">{{$index}}</th>
<td>{{item.fname}}</td>
<td>{{item.lname}}</td>
<td>{{item.uname}}</td>
</tr>
</tbody>
</table>
</body>
</html>
// Code goes here
var app = angular.module('ccTable', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.obj = {};
$scope.data = [];
for (var x = 0; x < 20; x++) {
var myobj = {};
myobj.fname = "FName " + x;
myobj.lname = "LName " + x;
myobj.uname = "UName " + x;
$scope.data.push(myobj);
}
$scope.selectedRow = 0;
$scope.rowSelect = function(index) {
$scope.selectedRow = index;
}
});
app.directive('ccRowSelector', ['$document', function($document) {
return {
restrict: 'A',
scope: {
collection: '=',
selectedRow: '='
},
link: function(scope, elem, attrs, ctrl) {
var elemFocus = false;
elem.on('mouseenter', function() {
elemFocus = true;
});
elem.on('mouseleave', function() {
elemFocus = false;
});
$document.bind('keydown', function(e) {
// var myElement = angular.element( document.querySelector( '#xx' ) );
// var topPos = myElement[0].offsetTop;
if (elemFocus) {
if (e.keyCode == 38) {
if (scope.selectedRow === 0) {
return;
}
scope.selectedRow--;
scope.$apply();
focusSelectedRow();
e.preventDefault();
}
if (e.keyCode == 40) {
if (scope.selectedRow == scope.collection.length - 1) {
return;
}
scope.selectedRow++;
scope.$apply();
focusSelectedRow();
e.preventDefault();
}
}
});
function focusSelectedRow() {
var selectedElement = angular.element(document.getElementsByClassName('selected'));
var pos = selectedElement[0].offsetTop + 400;
$("#content-area").scrollTop(pos);
}
}
};
}])
// app.component('myComponent', {
// bindings: {
// obj: '<'
// },
// controller: function MyComponentCtrl() {
// this.$onChanges = function(changesObj) {
// console.log('Change', changesObj);
// }
// }
// });
// app.component('myComponentx', {
// bindings: {
// obj: '<'
// },
// controller: function MyComponentCtrlx() {
// this.$onChanges = function(changesObj) {
// undefinedFn();
// }
// }
// });
/* Styles go here */
.table_body{
display:block;
height:100px;
overflow-y: auto;
width:100%;
}
.id_area{
width:2%;
}
.selected {
background-color:red;
}
.table td, .table th {
padding: 3px;
}