In this tutorial we will be learning about ng-class directive of Angular Js.
Angular Js is an MVC javascript framework that teaches HTML new things , using its two way data binding and dependency injection you write less and do more.
When working with tables or lists you will at some time come to a point when you would like to highlight the selected row of a table or an item on a list.
View demo – here
Download Code – here
Here I’m going to show you how to achieve it in Angular Js applications by building a simple food App .In the process of building our awesome food app we will also learn about ng-repeat and ng-class built-in directives of angular js
- Also see: Change row selection using arrows in ng-repeat
- Also see: How ng-repeat works
First lets create our food controller and add items to it and display it to the UI.
var foodApp = angular.module('foodApp',[]);
foodApp.controller('foodCtrl',function($scope){
$scope.foodItems = [{
name:'Noodles',
price:'10',
quantity:'1'
},
{
name:'Pasta',
price:'20',
quantity:'2'
},
{
name:'Pizza',
price:'30',
quantity:'1'
},
{
name:'Chicken tikka',
price:'100',
quantity:'1'
}];
});
Below I have defined my app and controller and displayed the items in a table using ng-repeat directive of angular.
| # | Name | Price | Quantity |
|---|---|---|---|
| {{item.name}} | {{item.price}} | {{item.quantity}} |
You might have noticed I’ve not yet added any thing to the first column below ‘#’, here we display the position of the row in the table by using the $index variable provided by default in ng-repeat.
{{$index}}
Now we will add conditional class to highlight the last clicked row by using built in ng-class directive
Add this code to the ng-repeat line – ng-class=”{‘selected’:$index == selectedRow}”
........
In the above line, class “.selected” will be applied to the element if the corresponding argument “$index == selectedRow” evaluates to true.You can also add multiple classes and arguments separated by comma.
Next we have to define a function which will set our variable selectedRow to $index of the clicked row.
Lets add that function into our foodApp controller,and call it using the ng-click directive of angular js.
$scope.selectedRow = null; // initialize our variable to null
$scope.setClickedRow = function(index){ //function that sets the value of selectedRow to current index
$scope.selectedRow = index;
}
Add below code to the ng-repeat line in index.html
ng-click=”setClickedRow($index)”
........
Now lets define our .selected class in index.html
Related link: Add animations to selection
Now whenever you click on any row our function setClickedRow($index) will set the value of selectedRow to the index of the row clicked,thus the ng-class argument for that row will evaluate to true and the .selected class will be applied for that row.
Great post!
You can change your setClickedRow function to remove the class if the row is clicked again:
$scope.selectedRow = null;
$scope.setClickedRow = function (index) {
$scope.selectedRow = ($scope.selectedRow == index) ? null : index;
}
Thanks!
Yes that can be done!
In the html you could shorten it even more so you don’t even need a method that sets the active index.
ng-click=” $scope.active = $index ”
This is the same as function(index) { $scope.active = index; }
Thanks for this tut. Very helpful.
You are welcome!
helped alot 🙂
Glad it did 🙂
what if we want to select multiple rows?
For multiple, you can keep an array of row indexes instead of a variable, So when user clicks on a row you push that row number into that array, if the user clicks on the same row you remove the number.
And your row highlighting logic will check if the row index exists in that array.
Can you give an example of this?
Hello Rahil.,,. Once again very helpful. I want to use this code with the custom filter code you posted.. Once I select a row, how do I grab a field in that row. For example, a catalog number will be in the selected row and I want to use that number. Again I am new to Angularjs and have not begun to walk yet,, only crawl.
You can place a function on the row, alongside ng-repeat, and pass the catalog number for that row as parameter to the function. Use ng-click to trigger he function.
Thank u. so much sir…….. great blog..
Excellent – thanks Rahil !
Great post, very usefull, thanks a lot
You are welcome!
Very useful article thank you so much Rahil 🙂
Glad you found it useful, thanks for stopping by.
Hey dude,
Thanks for the post, I really enjoyed it. Quick question, what if you want to Name, Price , Quantity values also when the row is clicked instead of displaying one value for index?
Thank you in advance!!
Hi phila,
You can simply pass the ‘item’ as a second parameter along with ‘$index’ in ‘setClickedRow’ function, like ‘setClickedRow($index, item)’. Then in controller you can easly access item to get all details for the selected row.
Hi Rail.
Thank you so much, your post has been really helpful for me.
Just a question. I need to do the same for the columns… is it possible?
Thank you so much.
Does anyone know how to get the $anchorScroll working for a table. I need to get the table scroll to the selected element in the table on page load.
great work…:-)…..perfectly working..
but i am facing some issue here ,because my table contains alternate coloring property . so its not working on alternate colored table rows.
.tableRow:nth-of-type(odd) {
background-color:#f3f3f3;
}
Please help. 🙂
Use ng-class-odd/ ng-class-even https://docs.angularjs.org/api/ng/directive/ngClassOdd
What if I want to color only the selected element
How can i select multiple rows and highligh
If the table is already filled and displayed — how can I select a row programmatically? Just calling changeSelection doesn’t seem to mimic a click on that row. I guess the question really is How to invoke a click on a row via js?
I tried to implement this. It works but because I have a huge set of rows , The highlight takes a lot of time to appear. I am using ng-class as below.
{{signal.acronym}}
I would appreciate if you can suggest a way to overcome this performance issue.
Thanks
I am sorry. The code did not post properly.
<button ng-class="{true: 'btn btn-primary', false:' btn btn-default'}[$index==selectedIndex]" ng-init = "showSignalInfo(selectedIndex)"
Hi , when i click on the row it is highlighted (as above ) and I need the row to be shown on top out of all the rows. Help me
Thank you.