Filter table created with ng-repeat when value greater than in AngularJS

skp
 
on Jan 22, 2020 04:52 AM
Sample_948731.zip
2660 Views

How to filter data in ng-repeat table in angularjs

How to display data from the database say I have a column days such as 1, 2, 3, 4, 5 etc. I have to display the data based on that column filter like one table is above 5 days and the other table is below 5 days.

Here, days column is int variable.

<tr ng-repeat="ps2 in paymentSplitups | filter : Days">                                    
    <td style="text-align:center;">{{ps2.Days}}</td>

How to show days which are only greater than 5

 

Download FREE API for Word, Excel and PDF in ASP.Net: Download
dharmendr
 
on Jan 22, 2020 06:25 AM

Hi skp,

Refer below sample code.

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
    <script type="text/javascript">
        var app = angular.module('MyApp', [])
        app.controller('MyController', function ($scope) {
            $scope.Customers = [{ CustomerId: 1, Name: "John Hammond", Country: "United States" },
                                { CustomerId: 2, Name: "Mudassar Khan", Country: "India" },
                                { CustomerId: 3, Name: "Suzanne Mathews", Country: "France" },
                                { CustomerId: 4, Name: "Robert Schidner", Country: "Russia"}];

            $scope.GreaterThan = function (prop, val) {
                return function (item) {
                    return item[prop] > val;
                }
            }
        });
    </script>
    <div ng-app="MyApp" ng-controller="MyController">
        <table border="1" cellpadding="1" cellspacing="1">
            <tr>
                <th>Customer Id</th>
                <th>Name</th>
                <th>Country</th>
            </tr>
            <tbody ng-repeat="m in Customers | filter : GreaterThan('CustomerId',2)">
                <tr>
                    <td>{{m.CustomerId}}</td>
                    <td>{{m.Name}}</td>
                    <td>{{m.Country}}</td>
                </tr>
            </tbody>
        </table>
        <hr />
        <table border="1" cellpadding="1" cellspacing="1">
            <tr>
                <th>Customer Id</th>
                <th>Name</th>
                <th>Country</th>
            </tr>
            <tbody ng-repeat="m in Customers" ng-if="m.CustomerId > 2">
                <tr>
                    <td>{{m.CustomerId}}</td>
                    <td>{{m.Name}}</td>
                    <td>{{m.Country}}</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>

Demo