JSFiddle - React, Tailwind, and code Playground

by Ravindra Athreya

HTML

<div ng-controller="StudentController"> 

    <table>
        <tr ng-repeat="student in students" ng-class="isGrey[$index]" 
            ng-click="toggleClass($index)">
            <td>{{student.id}}</td>
            <td>{{student.firstname}}</td>
            <td>{{student.lastname}}</td>
        </tr>
    </table>
</div>

CSS

.is-grey-true { background-color: #ccc; }
        .error { background-color: red; }

JavaScript

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

    studentApp.controller('StudentController', function($scope){
        $scope.students = [
            { id:1, firstname: 'Mahesh', lastname: 'Sapkal'},
            { id:2, firstname: 'Hardik', lastname: 'Joshi'},
            { id:3, firstname: 'Sagar', lastname: 'Mhatre'}
        ];
        $scope.isGrey = [];

        $scope.toggleClass = function (id) {
        $scope.isGrey[id] = $scope.isGrey[id]=='error'?'':'error';
        };
    });