Menu ▼



Posted By :
avatarmrkraju
Total Views : 1182

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.

Example

Employee

Employee
{{employee.Name}}

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": "Jhon"
        },
            {
                "Name": "Williams"
            }]
        });
    </script>
</body>
</html>






comments powered by Disqus


Search dotnetlearners.com