Assign Filter output to Variable in AngularJS

Last Reply 12 days ago By dharmendr

Posted 12 days ago

How to assigning filter output to variables in angularjs.

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