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
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
Share Improve this question edited Mar 27, 2014 at 11:19 msapkal asked Mar 27, 2014 at 11:06 msapkalmsapkal 8,3462 gold badges33 silver badges48 bronze badges 4- can you put a fiddle please? – John Smith Commented Mar 27, 2014 at 11:10
- @John: added jsfiddle. – msapkal Commented Mar 27, 2014 at 11:19
- jsfiddle.net/hGE27 heres a working fiddle – John Smith Commented Mar 27, 2014 at 11:20
- 1 you shouldn't add the property isGrey to the students-object because it's something that the model shouldnt know – John Smith Commented Mar 27, 2014 at 11:24
4 Answers
Reset to default 14Every 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/
You need to flip the value of isGrey:
$scope.toggleClass = function () {
$scope.isGrey = !$scope.isGrey;
};
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;
}
}
};
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.