Filter data with multiple parameters in AngularJS

Last Reply 6 months ago By dharmendr

Posted 6 months ago

How to filter data by multiple parameter in Angularjs in asp.net

You are viewing reply posted by: dharmendr 6 months ago.
Posted 6 months ago Modified on 6 months ago

Hi rani,

Check this example. Now please take its reference and correct your code.

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body ng-app="MyApp">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular.min.js"></script>
    <script type="text/javascript">
        var app = angular.module('MyApp', []);
        app.controller('MyController', function ($scope, $http) {
            $scope.name = "na";
            $scope.city = "se";
            $scope.Employees = [{ Id: 1, Name: "Nancy Davolio", City: "Seattle", Country: "USA" },
                                { Id: 2, Name: "Andrew Fuller", City: "Tacoma", Country: "USA" },
                                { Id: 3, Name: "Janet Leverling", City: "Kirkland", Country: "USA" },
                                { Id: 4, Name: "Margaret Peacock", City: "Redmond", Country: "USA" },
                                { Id: 5, Name: "Steven Buchanan", City: "London", Country: "UK" },
                                { Id: 6, Name: "Michael Suyama", City: "London", Country: "UK" },
                                { Id: 7, Name: "Robert King", City: "London", Country: "UK" },
                                { Id: 8, Name: "Laura Callahan", City: "Seattle", Country: "USA" },
                                { Id: 9, Name: "Anne Dodsworth", City: "London", Country: "UK"}];

            $scope.search = function (employee) {
                if ((!$scope.name || !$scope.city) ||
                ((employee.Name.toLowerCase().indexOf(($scope.name || '').toLowerCase()) != -1)
                 || (employee.City.toLowerCase().indexOf(($scope.city || '').toLowerCase()) != -1))) {
                    return true;
                }
                return false;
            };
        });
        app.controller('MyController1', function ($scope, $http) {
            $scope.Employees = [{ Id: 1, Name: "Nancy Davolio", City: "Seattle", Country: "USA" },
                                { Id: 2, Name: "Andrew Fuller", City: "Tacoma", Country: "USA" },
                                { Id: 3, Name: "Janet Leverling", City: "Kirkland", Country: "USA" },
                                { Id: 4, Name: "Margaret Peacock", City: "Redmond", Country: "USA" },
                                { Id: 5, Name: "Steven Buchanan", City: "London", Country: "UK" },
                                { Id: 6, Name: "Michael Suyama", City: "London", Country: "UK" },
                                { Id: 7, Name: "Robert King", City: "London", Country: "UK" },
                                { Id: 8, Name: "Laura Callahan", City: "Seattle", Country: "USA" },
                                { Id: 9, Name: "Anne Dodsworth", City: "London", Country: "UK"}];
        });
    </script>
    <div ng-controller="MyController" class="container">
        <div class="row">
            <input type="text" ng-model="name" class="form-control" placeholder="Enter Name" />
            <input type="text" ng-model="city" class="form-control" placeholder="Enter City" />
        </div>
        <div class="row">
            &nbsp;</div>
        <div class="row">
            <table class="table table-striped table-bordered table-hover">
                <tr>
                    <th>Id</th>
                    <th>Name</th>
                    <th>City</th>
                    <th>Country</th>
                </tr>
                <tr ng-repeat="employee in Employees | filter: search">
                    <td>{{employee.Id}}</td>
                    <td>{{employee.Name}}</td>
                    <td>{{employee.City}}</td>
                    <td>{{employee.Country}}</td>
                </tr>
            </table>
        </div>
    </div>
    <hr/>
    <div ng-controller="MyController1" class="container">
        <div class="row">
            <input type="text" ng-model="search.name" class="form-control" placeholder="Enter Name" />
            <input type="text" ng-model="search.city" class="form-control" placeholder="Enter City" />
        </div>
        <div class="row">
            &nbsp;</div>
        <div class="row">
            <table class="table table-striped table-bordered table-hover">
                <tr>
                    <th>Id</th>
                    <th>Name</th>
                    <th>City</th>
                    <th>Country</th>
                </tr>
                <tr ng-repeat="employee in Employees | filter: {Name: search.name, City: search.city}">
                    <td>{{employee.Id}}</td>
                    <td>{{employee.Name}}</td>
                    <td>{{employee.City}}</td>
                    <td>{{employee.Country}}</td>
                </tr>
            </table>
        </div>
    </div>
</body>
</html>

Demo