Angular toggle table row ng-class with ng-repeat

Question

This seems not to be working for me. I've a ng-repeat,ng-click and ng-class on the tr. Clicking on the tr should toggle the class to .error.

Currently clicking a tr will change the class of all the table rows.

<!doctype html>
<html lang="en" ng-app="studentApp">
<head>
    <meta charset="UTF-8">
    <style>
        .is-grey-true { background-color: #ccc; }
        .error { background-color: red; }
    </style>
    <script type="text/javascript" src="js/angular.min.js"></script>
</head>

<body ng-controller="StudentController">

    <table ng-hide="showTable">
        <tr ng-repeat="student in students" ng-class="{error : isGrey}" ng-click="toggleClass()">
            <td>{{student.id}}</td>
            <td>{{student.firstname}}</td>
            <td>{{student.lastname}}</td>
        </tr>
    </table>
<script type="text/javascript">
    var studentApp = angular.module('studentApp',[]);

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

        $scope.toggleClass = function () {
            $scope.isGrey = true;
        };
    });
</script>
</body>
</html>

JSFiddle

you shouldn't add the property isGrey to the students-object because it's something that the model shouldnt know — John Smith
– John Smith, Commented Mar 27, 2014 at 11:24

John Smith · Accepted Answer · 2014-03-27 11:14:53Z

14

Every refers to the same ng-class ($scope.error). You could define an array that contais the class for every row.

$scope.isGrey = [];

Refer to the specific class like this in HTML

<tr ng-repeat="student in students" ng-class="isGrey[$index]" ng-click="toggleClass()">

and change the toggleClass to the following

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

http://jsfiddle.net/hGE27/

answered Mar 27, 2014 at 11:14

John Smith

6257 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Dunken · Accepted Answer · 2014-03-27 11:12:22Z

0

You need to flip the value of isGrey:

$scope.toggleClass = function () {
    $scope.isGrey = !$scope.isGrey;
};

answered Mar 27, 2014 at 11:12

Dunken

8,6917 gold badges63 silver badges90 bronze badges

Comments

callmekatootie · Accepted Answer · 2014-03-27 11:17:47Z

0

That is because each row is modeled to the same instance of isGrey.

What you need to do is associate each row with its own value of isGrey.

This means that you need to update the students object with a new property called isGrey as follows:

    $scope.students = [
        { id:1, firstname: 'Mahesh', lastname: 'Sapkal', isGrey: false},
        { id:2, firstname: 'Hardik', lastname: 'Joshi', isGrey: false},
        { id:3, firstname: 'Sagar', lastname: 'Mhatre', isGrey: false}
    ];

You can the update the tr tag as:

<tr ng-repeat="student in students" ng-class="{error : student.isGrey}"
    ng-click="toggleClass(student)">

and for the code for the toggleClass() function to be:

$scope.toggleClass = function (student) {
    for (var i = 0; i < $scope.students.length; i++) {
        if ($scope.students[i].id === student.id) {
            $scope.students[i].isGrey = true;

            break;
        }
    }
};

answered Mar 27, 2014 at 11:17

callmekatootie

11.2k16 gold badges74 silver badges109 bronze badges

1 Comment

msapkal Over a year ago

Yeah, that the one way of doing it, but I don't want an extra property on student object. :)

Brocco · Accepted Answer · 2014-03-27 11:18:34Z

0

As someone else has stated, the value of $scope.isGrey does need to be toggled or set based upon your necessary business rules.

That being said, based upon what you've described you want to color each row individually in which case you need to add isGrey to each element withing your array and toggle its value.

$scope.toggleClass = function(student){ student.isGrey = !student.isGrey; }

and in your markup

<tr ng-repeat="student in students" ng-class="{error : student.isGrey}" ng-click="toggleClass(student)">

I hope this helps you.

answered Mar 27, 2014 at 11:18

Brocco

65.4k12 gold badges74 silver badges77 bronze badges

2 Comments

John Smith Over a year ago

I'm not sure if he want's such a property for his students object.

msapkal Over a year ago

Yeah, that's right I don't want an extra property on student object. :)

Collectives™ on Stack Overflow

Angular toggle table row ng-class with ng-repeat

4 Answers 4

Comments

Comments

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related