Filter data with multiple parameters in AngularJS

Last Reply one year ago By dharmendr

Posted one year ago

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

Posted one year ago Modified on one year 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