How to use reverse flag with ng-click Directive In Angular
In this approach, we are sorting the sample list of data that contains the payment dates. We have used the button that sorts the data in ascending and descending order by use of the ng-click directive which updates the reverse flag. the reverse flag in AngularJS mainly reverses the order of the payment list by using the ‘orderBy‘ filter and allows us to switch from the ascending and descending sorting type. When the user clicks on the descending option, the reverse flag is been updated and all the dates are sorted in descending order.
Example: Below is an example that showcases performing the Descending order by date filter in AngularJS using the reverse flag with the ng-click directive.
HTML
<!doctype html> < html ng-app = "myApp" > < head > < title > Descending Order by Payment Date Filter - Approach 2 </ title > < script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js" > </ script > < style > body { font-family: Arial, sans-serif; background-color: #f0f0f0; margin: 0; padding: 0; } .header { background-color: transparent; text-align: center; padding: 20px; } .container { max-width: 800px; margin: 0 auto; padding: 20px; background-color: #fff; border-radius: 5px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } h1 { color: green; } h3 { margin-top: 20px; } ul { list-style-type: none; padding: 0; } li { margin: 10px 0; padding: 10px; border: 1px solid #ddd; background-color: #f9f9f9; border-radius: 5px; } input[type="text"], select { width: 100%; padding: 10px; margin-bottom: 10px; border: 1px solid #ddd; border-radius: 5px; } .toggle-button { background-color: green; color: white; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer; } </ style > </ head > < body > < div class = "header" > < h1 >w3wiki</ h1 > </ div > < div class = "container" ng-controller = "PaymentController" > < h3 > Approach 2: Sort Payments by Payment Date </ h3 > < label for = "dateFilter" > Select Payment Date Order: </ label > < button class = "toggle-button" ng-click = "toggleOrder()" > {{ reverse ? "Sort Ascending" : "Sort Descending" }} </ button > < h3 >Payments:</ h3 > < ul > < li ng-repeat = "payment in payments | orderBy:'date':reverse" > < strong >{{ payment.name }}</ strong > - {{ payment.date | date: "dd/MM/yyyy" }} </ li > </ ul > </ div > < script > var app = angular.module("myApp", []); app.controller("PaymentController", function ($scope) { $scope.payments = [ { name: "Payment A", date: new Date("2019-09-25") }, { name: "Payment B", date: new Date("2020-03-15") }, { name: "Payment C", date: new Date("2021-06-12") }, { name: "Payment D", date: new Date("2022-12-07") }, ]; $scope.reverse = false; $scope.toggleOrder = function () { $scope.reverse = !$scope.reverse; }; }); </ script > </ body > </ html > |
Output:
How to Sort List by Date Filter in AngularJS ?
AngularJS is a feature-based JavaScript framework that uses various tools to create dynamic single-page web applications. While developing the application we have the requirement to play with the data in AngularJS and sort this list of data by a date properly in descending order. This can be done using the AngularJS filters, as these filters enable us to format, transform, and manipulate the data before it is displayed in our application. In this article, we will see two different approaches through which we can perform descending order-by-date filtering in AngularJS.