Assign Filter output to Variable in AngularJS

Last Reply 3 months ago By dharmendr

Posted 3 months ago

How to assigning filter output to variables in angularjs.

You are viewing reply posted by: dharmendr 3 months ago.
Posted 3 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>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