Assign Filter output to Variable in AngularJS

Last Reply one year ago By dharmendr

Posted one year ago

How to assigning filter output to variables in angularjs.

Posted 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>Assign filter output to variables</title>
    <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) {
            $scope.Customers = [
                { Id: 1, Name: "John Hammond", Country: "United States" },
                { Id: 2, Name: "Mudassar Khan", Country: "India" },
                { Id: 3, Name: "Suzanne Mathews", Country: "France" },
                { Id: 4, Name: "Robert Schidner", Country: "Russia" }
            ];
        });
    </script>
</head>
<body>
    <div ng-app="MyApp" ng-controller="MyController">
        Enter Name : <input ng-model="search" type="text" placeholder="Enter name" />
        <hr />
        <table border="1" cellpadding="0" cellspacing="0">
            <thead>
                <tr>
                    <th>Id</th>
                    <th>Name</th>
                    <th>Country</th>
                </tr>
            </thead>
            <tbody ng-repeat="customer in customerVariable = (Customers | filter:search)">
                <tr>
                    <td>{{customer.Id }}</td>
                    <td>{{customer.Name }}</td>
                    <td>{{customer.Country }}</td>
                </tr>
            </tbody>
        </table>
       <hr />
       <h3>Resutls from filtered variable.</h3>
        <table border="1" cellpadding="0" cellspacing="0">
            <thead>
                <tr>
                    <th>Id</th>
                    <th>Name</th>
                    <th>Country</th>
                </tr>
            </thead>
            <tbody ng-repeat="customer in customerVariable">
                <tr>
                    <td>{{customer.Id }}</td>
                    <td>{{customer.Name }}</td>
                    <td>{{customer.Country }}</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>

Demo