How to display message when ng-repeat filter is empty or null using AngularJs with MVC - Free Asp.Net,MVC,AngularJs,Jquery,Javascript,Sql Server,WCF,Entity framework snippets and tutorial

How to display message when ng-repeat filter is empty or null using AngularJs with MVC

In this article I am going to explain how to display message No Result Found when ng-repeat filter is empty or null using AngularJs with MVC.

How to display message when ng-repeat filter is empty or null using AngularJs with MVC



Description:

I am displaying the employees detail in Grid using ng-repeat. I want to show message when ng-repeat return empty or null.

Implementation:
To show message add the below given snippets:
<div ng-show="(employees|filter:empname).length==0" style="color:red;font-weight:bold">No Result Found</div>

Example:
Here in this example I want to filter the records based on employee name.

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);          
        }       
    }
}

View (index.cshtml):
@{
    ViewBag.Title = "MVC-AngualarJs Tutorial";
}
<style>
    table tr td th {
        text-align: center;
        border:none;
    }
    .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;
    }
</style>

<h2>MVC-AngualarJs Search(Filter) Tutorial</h2>
<fieldset style="width:60%">
    <legend>AngualarJs Search(Filter) Tutorial</legend>

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

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


    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script>
<script>
    var angular = angular.module('mvcapp', []);
  
    angular.controller('AngularController', function ($scope, $http) {

            $http.get('/Angular/GetEmployees').success(function (data) {            
                $scope.employees = data;
            });
         
    });
</script>

Now build and run the project. Search the record which not exist in database. 


What do you think about this article?

If you found this article useful, please share and follow on Facebook, Twitter, Google Plus and other social media websites. To get free updates subscribe to newsletter. Please put your thoughts and feedback in comments section.

Share this

Share on FacebookTweet on TwitterPlus on Google+


EmoticonEmoticon