AngularJS Simple Example

by hephistocles

HTML

<div ng-app="theApp" ng-controller="MainCtrl">
    <table ng-mouseleave="hoveredCol = null; hoveredRow = null">
        <tr ng-repeat="row in rows">
            <td ng-repeat="game in games" ng-mouseover="mouseOverTd(row, game)" ng-class="{highlighted: (hoveredCol == game || hoveredRow == row)}">{{game}}</td>
        </tr>
    </table>

CSS

td {
    padding:10px;
}
.highlighted {
    background-color:red;
}

JavaScript

angular.module("theApp", [])
    .controller("MainCtrl", function ($scope) {
        $scope.rows = [1, 2, 3, 4]
        $scope.games = ['a', 'b', 'c', 'd'];
        $scope.hoveredCol = null;
        $scope.hoveredRow = null;
        $scope.mouseOverTd = function (row, game) {
            $scope.hoveredRow = row;
            $scope.hoveredCol = game;
        };
    });