Sunday, August 7, 2016

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. 


No comments:

Post a Comment