Enhance AngularJS functionality by implementing a custom method to handle sorting within ng-click and ng-show

Question

Enhance AngularJS functionality by implementing a custom method to handle sorting within ng-click and ng-show

I am currently managing a set of table columns that can be sorted in ascending and descending order. Previously, the sorting logic was implemented within each ng-click and ng-show directive in the following way:

HTML

<a style="color:black" href="" ng-click="sortReverse = !sortReverse; changeSortType('id')">
  Group id
  <span ng-show="sortType == 'id' && !sortReverse" class="fa fa-caret-down"></span>
  <span ng-show="sortType == 'id' && sortReverse" class="fa fa-caret-up"></span>
</a></th>

CONTROLLER

  $scope.sortType = 'count';
  $scope.sortReverse = true;

  $scope.changeSortType = function (sortType){
    $scope.sortType = sortType;
  };

  $scope.itemSortValue = function (item) {
    return Service.sort(item, $scope.sortType)
  };

We now aim to streamline this process by implementing a method that achieves the same outcome, reducing the amount of code in the HTML.

Unfortunately, I have been struggling to figure out how to achieve this using AngularJS. I have attempted various approaches without success. While I have come across some suggestions online, they have not yielded the desired results. Could someone please provide guidance on the code implementation?

javascript angularjs sorting

Answer 1

Answer №1

When working with the <a> element, make sure to remove the line sortReverse = !sortReverse; from the ng-click and instead add

$scope.sortReverse= !$scope.sortReverse

to the first line of the method changeSortType.

Additionally, for the ng-show functionality, create a new method as follows:

$scope.myMethod = function (id, reverse){
    return id && reverse;
  };

Lastly, update the HTML code to the following:

<span ng-show="myMethod('id',!sortReverse)" class="fa fa-caret-down"></span>
  <span ng-show="myMethod('id',sortReverse)" class="fa fa-caret-up"></span>

Answer 2

When working with the <a> element, make sure to remove the line sortReverse = !sortReverse; from the ng-click and instead add

$scope.sortReverse= !$scope.sortReverse

to the first line of the method changeSortType.

Additionally, for the ng-show functionality, create a new method as follows:

$scope.myMethod = function (id, reverse){
    return id && reverse;
  };

Lastly, update the HTML code to the following:

<span ng-show="myMethod('id',!sortReverse)" class="fa fa-caret-down"></span>
  <span ng-show="myMethod('id',sortReverse)" class="fa fa-caret-up"></span>

Answer 3

Answer №2

Give this code a try.

HTML

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<body>

<div ng-app="myApp" ng-controller="customersCtrl">
<div class="jumbotron bg-dark" style="border-radius: 0px; margin-bottom: 0px;">
        <h1 class="text-center" style="color:azure;">Table Sort</h1> 
</div>
 <table class="table table-dark table-striped">
    <thead>
      <tr>
        <th ng-click="orderByMe('Name')" style="cursor: pointer;">Name <i class="fa fa-sort-desc" style="font-size:15px;color: whitesmoke" ng-if=" toggleCursor == 'desc'"></i>  <i class="fa fa-sort-asc" ng-if=" toggleCursor == 'asc'"></i></th>
        <th style="cursor: pointer;">City </th>
        <th style="cursor: pointer;"> Country</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat=" data in myData  | orderBy:myOrderBy">
       <th>{{data.Name}}</th>
       <th>{{data.City}}</th>
       <th>{{data.Country}}</th>
      </tr>
    </tbody>
  </table>

</div>
</body>
</html>

JavaScript File

 var app = angular.module('myApp', []);
    app.controller('customersCtrl', function($scope, $http) {
        $http.get("https://www.w3schools.com/angular/customers.php").then(function(response) {
            $scope.myData = response.data.records;
        });
        $scope.toggleCursor = 'desc';
        $scope.myOrderBy = 'Name';
        $scope.orderByMe = function(sort) {
             $scope.myOrderBy = sort;
             $scope.sortArray = $scope.myData.sort();
             if($scope.toggleCursor == 'desc')
                {
                    $scope.toggleCursor = 'asc';
                    $scope.myOrderBy = $scope.sortArray;
                }        
             else
             {
                 $scope.toggleCursor = 'desc';
                 $scope.myOrderBy =  $scope.sortArray.reverse();
             }
        }
    });

Answer 4

Give this code a try.

HTML

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<body>

<div ng-app="myApp" ng-controller="customersCtrl">
<div class="jumbotron bg-dark" style="border-radius: 0px; margin-bottom: 0px;">
        <h1 class="text-center" style="color:azure;">Table Sort</h1> 
</div>
 <table class="table table-dark table-striped">
    <thead>
      <tr>
        <th ng-click="orderByMe('Name')" style="cursor: pointer;">Name <i class="fa fa-sort-desc" style="font-size:15px;color: whitesmoke" ng-if=" toggleCursor == 'desc'"></i>  <i class="fa fa-sort-asc" ng-if=" toggleCursor == 'asc'"></i></th>
        <th style="cursor: pointer;">City </th>
        <th style="cursor: pointer;"> Country</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat=" data in myData  | orderBy:myOrderBy">
       <th>{{data.Name}}</th>
       <th>{{data.City}}</th>
       <th>{{data.Country}}</th>
      </tr>
    </tbody>
  </table>

</div>
</body>
</html>

JavaScript File

 var app = angular.module('myApp', []);
    app.controller('customersCtrl', function($scope, $http) {
        $http.get("https://www.w3schools.com/angular/customers.php").then(function(response) {
            $scope.myData = response.data.records;
        });
        $scope.toggleCursor = 'desc';
        $scope.myOrderBy = 'Name';
        $scope.orderByMe = function(sort) {
             $scope.myOrderBy = sort;
             $scope.sortArray = $scope.myData.sort();
             if($scope.toggleCursor == 'desc')
                {
                    $scope.toggleCursor = 'asc';
                    $scope.myOrderBy = $scope.sortArray;
                }        
             else
             {
                 $scope.toggleCursor = 'desc';
                 $scope.myOrderBy =  $scope.sortArray.reverse();
             }
        }
    });

Enhance AngularJS functionality by implementing a custom method to handle sorting within ng-click and ng-show

Answer №1

Answer №2

Similar questions

The utilization of the Angular date pipe significantly impacts the way dates are

When trying to run a jQuery function on click or load events, an error message stating that

Retrieve the data from a Sequelize Promise without triggering its execution

Strange actions observed in AJAX POST request

Is there a way to arrange 7 fractions in an array using Java?

Struggling with Angular Material not functioning properly? All features seem to be included

Setting up the Webpack configuration for a React application to incorporate source maps from external React packages that are listed as dependencies

Antialiasing with Three.js appears to be malfunctioning specifically on iPhone 5 and iPhone 5s devices

"Getting Started with Redux/React - Implement logic to add a new item if it doesn't already

Tips for effectively implementing a custom theme alongside a component library that utilizes Material UI without the need to apply it to every single component

Protractor encounters difficulties in Firefox and Internet Explorer browsers

My code fails to recognize the top property when the window size is 1300px

Removing an object in Three.js using scene.getObjectByName() method

Creating a new item in a list using AngularJS functions perfectly on JSfiddle, but encounters issues when attempted in Visual

Resolving a Form Group Challenge in Angular 9

Challenges encountered when attempting to align faces within Three.JS stemming from the use of two distinct

Introducing LightZAP v2.54 (silent update2), the revolutionary Lightbox custom plugin that seamlessly launches when the page loads using the designated tag name (#img1)

Guide to successfully navigating to a webpage using page.link when the link does not have an id, but is designated by a

Weird State / Unusual Effectiveness with NextJS Links

I am having trouble having a select component populate with new child components while still maintaining its original value