Assign Filter output to Variable in AngularJS

Last Reply 11 days ago By dharmendr

Posted 11 days ago

How to assigning filter output to variables in angularjs.

Posted 11 days 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