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 demohere
Download Codehere

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

First lets create our food controller and add items to it and display it to the UI.

foodCtrl.js


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.

index.html

# 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.

31 Comments

  1. 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;
    }

      1. 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; }

    1. 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.

  2. 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.

      1. 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!!

        1. 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.

  3. 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.

  4. 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.

  5. 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. 🙂

  6. 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?

  7. 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

    1. 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)"

  8. 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.

Leave a Reply

Your email address will not be published. Required fields are marked *