Angular Js: CSS Style 2

by Nhat Nguyen

HTML

<div ng-app>
    <table ng-controller='restaurantTableController'>
        <tr ng-repeat='restaurant in directory' ng-click='selectRestaurant($index)' ng-class='{selected: $index==selectedRow}'>
            <td>{{restaurant.name}}</td>
            <td>{{restaurant.cuisine}}</td>
        </tr>
    </table>
</div>

CSS

.selected {
    background-color: lightgreen;
}

JavaScript

function restaurantTableController($scope) {
    $scope.directory = [{
        name: 'The Handsome Heifer',
        cuisine: 'BBQ'
    }, {
        name: "Green's Green Greens ",
        cuisine: 'Salads '
    }, {
        name: 'House of Fine Fish ',
        cuisine: 'Seafood '
    }];

    $scope.selectRestaurant = function (row) {
        $scope.selectedRow = row;
    };
}