Filter table in angular js with example in MVC

  1.Open visual studio Click on new project select Asp.net MVC web application as shown below

                           

2.then add controller give  name as Home

3.write  JsonResult method in Home controller as shown below.

       public JsonResult GetPersons()

        {

            angularDBEntities e = new angularDBEntities();

            var result = e.EmpTBs.ToList();

            

            return Json(result, JsonRequestBehavior.AllowGet);

        }

GetPersons() returns employee list,here we used entityframework to interact with database.

EmpTB is the table name 

4.add one js file give name as Employee.js

-->create module in angular js

var EmpApp = angular.module('EmpApp', [])--

--> create service/factory to get employee list from server

EmpApp.factory('EmpService', ['$http', function ($http) { 

    var EmpService = {};

    EmpService.getEmps = function () {

        return $http.get('/Home/GetPersons');

    };

    return EmpService;

}]);

here,$http.get() calls controller method getpersons()

In AngularJS world, the services are singleton objects or functions that carry out specific tasks. It holds some business logic. Separation of concern is at the heart while designing an AngularJS application. Your controller must be responsible for binding model data to views using $scope. It does not contain logic to fetch the data or manipulating it.

AngularJS can manage these service objects. Wherever we want to use the service, we just have to specify its name and AngularJS auto-magically inject these objects 

We saw there are two ways of defining an angularjs service. Using module.factory and module.service.

module.service( 'serviceName', function ); module.factory( 'factoryName', function );

When declaring serviceName as an injectable argument you will be provided with an instance of the function. In other words new FunctionYouPassedToService(). This object instance becomes the service object that AngularJS registers and injects later to other services / controllers if required.

When declaring factoryName as an injectable argument you will be provided with the value that is returned by invoking the function reference passed to module.factory.

---> create angular js controller with in this scope call service bind employee list to Emps

EmpApp.controller('EmpController', function ($scope, EmpService) {

    $scope.Emps = [];

    getEmps();

    function getEmps() {

        EmpService.getEmps()

            .success(function (emps) {

                $scope.Emps = emps;

                console.log($scope.Emps);

            })

            .error(function (error) {

                $scope.status = 'Unable to load customer data: ' + error.message;

                console.log($scope.status);

            });

    }

});

5.add view for action method Index in Homcontroller

install angularjs core reference files from nu-get manager from the tab tools

@{

    ViewBag.Title = "Index";

}

<script src="~/Scripts/angular.js"></script>

<script src="~/Scripts/Employee.js"></script>

<div ng-app="EmpApp" class="container">

    <br />

    <br />

    @*<input type="text" placeholder="Search Student" ng-model="searchStudent" />*@

    <br />

    @Html.DropDownList("status", new List<SelectListItem>

           { new SelectListItem{Text="revathi", Value="revathi",Selected=true},

             new SelectListItem{Text="pradeep", Value="pradeep"},new SelectListItem{Text="naresh", Value="naresh"}}, "Select One", new {ng_model= "searchStudent"})

    @Html.DropDownList("address", new List<SelectListItem>

           { new SelectListItem{Text="hyderabad", Value="hyderabad",Selected=true},

             new SelectListItem{Text="20000", Value="20000"},new SelectListItem{Text="goa", Value="goa"}}, "Select One", new { ng_model = "searchaddress" })

    <div ng-controller="EmpController">

        <table class="table">

            <tr ng-repeat="r in Emps | filter :searchStudent|filter:searchaddress">

                <td>{{r.id}}</td>

                <td>{{r.name}}</td>

                <td>

                    {{r.salary}}

                </td>

                <td>

                    {{r.designation}}

                </td>

                <td>{{r.address}}</td>

            </tr>

</table>

    </div>

</div>

output

-------------------------------

     Select One revathi pradeep naresh       Select One hyderabad 20000 goa

1

revathi

20000

developer

hyderabad

-------------------------------------------------------------

    

     Select One revathi pradeep naresh       Select One hyderabad 20000 goa

1	revathi	20000	developer	hyderabad
2	pradeep	40000	engineer	belguam
3	kamal	38000	tester	hyderbad
4	naresh	45000	senior engineer	belguam
5	komal	23214	developer	hyderbad
6	kumar	32536	HR	goa