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>
4 answers
solution1
13 ACCPTED 2014-03-27 11:14:53
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';
};
solution2
0 2014-03-27 11:12:22
You need to flip the value of isGrey:
$scope.toggleClass = function () {
$scope.isGrey = !$scope.isGrey;
};
solution3
0 2014-03-27 11:17:47
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;
}
}
};
solution4
0 2014-03-27 11:18:34
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.