AngularJs: Search and highlight matched text in MVC application | ASPMANTRA | Asp.Net,MVC,AngularJs,Jquery,Javascript,Sql Server AND WCF snippets and tutorial

AngularJs: Search and highlight matched text in MVC application

Here in this article I am going to explain how to search and highlight the matched text using Angularjs in MVC application.

AngularJs: Search and highlight matched text in MVC application

I am displaying the data in table using ng-repeat. I want to highlight the searched text results.


I have created a table Employee and inserted dummy record into it. I am using database first approach.

Add Controller
Add empty Controller. Create json method to fetch the records from database. Here is code of Controller:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using MVC_Project.Models;
namespace MVC_Project.Controllers
    public class AngularController : Controller
        // GET: /Angular/
        DemoEntities1 db = new DemoEntities1();
        public ActionResult Index()
            return View();
        public JsonResult GetEmployees()
            var emp = db.Employees.ToList();
            return Json(emp, JsonRequestBehavior.AllowGet);          

Add View
Now add view for Index action. Write the code on view as given below:

Complete Code of Inedx.Cshtml

    ViewBag.Title = "MVC-AngualarJs Tutorial";
    table tr td th {
        text-align: center;
    .ng-binding {
        padding: 40px;
     a {
        text-decoration: none;
        color: #2196F3;
     /*tr:nth-child(odd) {
        background: #b8d1f3;
      Define the background color for all the EVEN background rows 
     tr:nth-child(even) {
        background: #dae5f4;
    .match {
        background: #24D0F9;
    .highlighttext {
        background: #F44336;
        color: #fff;

<fieldset style="width:90%">
    <legend>MVC-AngualarJs Search(Filter) and Highlight Searched text Tutorial</legend>

    <div ng-app="mvcapp" ng-controller="AngularController">    
               <td>Search :</td>
               <td colspan="2"><input type="text" ng-model="empname" placeholder="Search"></td>
               <th><a href="" ng-click="columnToOrder='id';reverse=!reverse">S.No.</a></th>
                   <a href="" ng-click="columnToOrder='Name';reverse=!reverse">Name</a>
                   <a href="" ng-click="columnToOrder='Phone';reverse=!reverse">Phone</a>
                   <a href="" ng-click="columnToOrder='Department';reverse=!reverse">Department</a>
                   <a href="" ng-click="columnToOrder='Salary';reverse=!reverse">Salary</a>
                   <a href="">Image</a>
               <th >
                   <a href="" ng-click="columnToOrder='EmailId';reverse=!reverse">Email</a>

           <tr ng-repeat="emp in employees| filter:empname |orderBy:columnToOrder:reverse">
               <td><span ng-bind-html="emp.Name|highlight:empname"></span></td>
               <td>{{emp.Phone }}</td>
               <td>{{emp.Salary }}</td>
               <td><img ng-src="{{emp.ImagePath || 'images/image.jpg'}}" alt="" title="{{emp.Name}}" width="150" height="150" /></td>
               <td><span ng-bind-html="emp.EmailId ||'email not available'|highlight:empname"></span></td>
        <div ng-show="(employees|filter:empname).length==0" style="color:red;font-weight:bold">No Result Found</div>

    <script src=""></script>
    var angular = angular.module('mvcapp', []);
    angular.controller('AngularController', ['$scope', '$http',function ($scope, $http) {

        $http.get('/Angular/GetEmployees').success(function (data) {
            $scope.employees = data;           
    }]).filter('highlight', function ($sce) {
        return function (text, phrase) {
            if (phrase) text = text.replace(new RegExp('(' + phrase + ')', 'gi'),
              '<span class="highlighttext">$1</span>')
            return $sce.trustAsHtml(text)

Now save the project, build and run. To test it search a record exist in database. Matched record will be highlight in red color with white text.

Post a Comment



Contact Form


Email *

Message *

Powered by Blogger.
Javascript DisablePlease Enable Javascript To See All Widget