All AngularJS Javascript
Rahil Shaikh  

Highlight a selected row in ng-repeat using ng-class

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.

   var foodApp = angular.module('foodApp',[]);
    $scope.foodItems = [{
        name:'Chicken tikka',

Below I have defined my app and controller and displayed the items in a table using ng-repeat directive of angular.

        <link href="css/bootstrap.min.css" rel="stylesheet" media="screen" />
        <link href="css/bootstrap-theme.min.css" rel="stylesheet" media="screen"/>
    <body ng-app="foodApp" ng-controller="foodCtrl">
        <table class="table table-bordered" >
            <tr ng-repeat="item in foodItems">
    <script src="js/angular.js"></script>
    <script src="js/foodCtrl.js"></script>

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.


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}”

       <tr ng-repeat="item in foodItems" 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

<tr ng-repeat="item in foodItems" ng-class="{'selected':$index == selectedRow}" ng-click="setClickedRow($index)">

Now lets define our .selected class in index.html

.selected {

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 thoughts on “Highlight a selected row in ng-repeat using ng-class

  1. Jon

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

      Yes that can be done!

      1. Daniel

        In the html you could shorten it even more so you don’t even need a method that sets the active index.

        ng-click=” $ = $index ”

        This is the same as function(index) { $ = index; }

  2. Matt

    Thanks for this tut. Very helpful.

    1. Rahil Shaikh

      You are welcome!

  3. skpandey5691

    helped alot 🙂

    1. Rahil Shaikh

      Glad it did 🙂

  4. Ketan

    what if we want to select multiple rows?

    1. Rahil Shaikh

      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.

      1. mengel

        Can you give an example of this?

  5. Don Cistaro

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

      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.

      1. Rajnish kumar

        Thank u. so much sir…….. great blog..

  6. Roger

    Excellent – thanks Rahil !

  7. Eduardo Moreno

    Great post, very usefull, thanks a lot

    1. Rahil Shaikh

      You are welcome!

  8. boran tülek

    Very useful article thank you so much Rahil 🙂

    1. Rahil Shaikh

      Glad you found it useful, thanks for stopping by.

      1. Phila

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

          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.

  9. Beatrice

    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.

  10. Pheba

    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.

  11. pinky sharma

    great work…:-)…..perfectly working..

  12. pinky sharma

    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) {


    Please help. 🙂

    1. Rahil Shaikh

      Use ng-class-odd/ ng-class-even

  13. Sunil Kumar

    What if I want to color only the selected element

  14. Night Wtacher

    How can i select multiple rows and highligh

  15. jimnkey

    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?

  16. Pheba

    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.


    I would appreciate if you can suggest a way to overcome this performance issue.


    1. Pheba

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

  17. Rama

    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 Comment