Highlight matched table rows based on entered text in a textbox using angularjs

This example shows you how to highlight or change background color of table when the table row data matched with the entered text in a textbox. You need to set the ng-class directive to the table row and write the expression to return true when the row/cell text match the entered text in textbox.




Source Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title></title> <style type="text/css"> .tblemp { border-collapse: collapse; } .tblemp th, .tblemp td { border: solid 1px #ccc; padding: 5px 10px; } .match { background: #24D0F9; } </style> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script> </head> <body> <div ng-app="SampleApp" ng-controller="SampleCntrl"> Employee <input type="text" ng-model="empfind" /> <br /> <br /> <table class="tblemp"> <thead> <tr> <th> Employee </th> </tr> </thead> <tr ng-repeat="employee in employeeList" ng-class="{match:empfind.length>0 &&employee.Name.toLowerCase().indexOf(empfind.toLowerCase())>=0}"> <td> {{employee.Name}} </td> </tr> </table> </div> <script> var myapp = angular.module("SampleApp", []); myapp.controller("SampleCntrl", function ($scope) { $scope.employeeList = [{ "Name": "Smith" }, { "Name": "John" }, { "Name": "Williams" }] }); </script> </body> </html>