JSFiddle - React, Tailwind, and code Playground

by marco_m_alves

HTML

<div ng-controller="Ctrl">
    Select a row index (0-99) to (1) highlight cell and (2) scroll into view
    <br>
    <input ng-model="index">
    <button ng-click="select()">select</button>    
<table>
    <tr ng-repeat="item in items">
        <td>
            <selectable model="item">
                [{{$index}}] {{item.value}}
            </selectable>
        </td>
    </tr>
</table>
</div>

JavaScript

var app = angular.module('app', []);

app.controller('Ctrl', function($scope) {

    var getItem = function(max) {
        return Math.floor(Math.random() * max);
    };

    $scope.items = [];

    for (var i = 0; i < 100; i += 1) {
        $scope.items.push({
            value: getItem(1000)
        });
    }
    
  
var index = undefined;        

    $scope.select = function() {
        if (index) $scope.items[index].selected = false;
        index = parseInt($scope.index, 10);
        $scope.items[index].selected = true;
    };
});

app.directive('selectable', function() {
    return {
        restrict: 'E',
        scope: {
            model: '='
        },
        replace: true,
        template: '<div ng-transclude></div>',
        transclude: true,
        controller: function($scope, $element) {
            $scope.$watch('model.selected', function() {
                var color = $scope.model.selected ? 'yellow' : 'white';
                $element[0].style.backgroundColor = color;
                if ($scope.model.selected) {
                    console.log($element);
                    $element[0].scrollIntoView();
                }
            });
        }
    };
});