AngularJS sorting a table

Question

I have a table which sorts fine. The sorting is happening but just not exactly as I want it to.

My problem is getting the table to default to ascending order each time you sort on a different column. As it stands the way the code works is that it will alternate between ascending and descending due to this changing between false and true:

  $scope.sortReverse  = false;

What I want is to add something to make it default to false when you change the column you are sorting on. Below is a plnkr. You will find that it will alternate between ascending and descending no matter what. What I need is for it to change to ascending when you sort by another column even if it was descending at the time.

Essentially I believe there needs to be a third bit of logic apply but I can't solve it as of yet.

Any ideas would be appreciated.

http://plnkr.co/edit/LrnPj1nx4sdQD8F9ctKB?p=preview

Artiom · Accepted Answer · 2015-10-01 09:38:07Z

When you change sorting, set reverse flag to false. Take a look at setSortingColumn function.

var app = angular.module("myApp", ['ui.bootstrap']);
app.filter('unique', function() {

   return function(arr, field) {
      var o = {},
         i, l = arr.length,
         r = [];
      for (i = 0; i < l; i += 1) {
         o[arr[i][field]] = arr[i];
      }
      for (i in o) {
         r.push(o[i]);
      }
      return r;
   };
})

app.controller("maincontroller", function($scope) {
   $scope.query = {};
   $scope.quer = {};
   $scope.queryBy = '$';
   $scope.isCollapsed = true;
   $scope.selectedRefs = [];

   $scope.setSortingColumn = function(sortType) {
      if ($scope.sortType == sortType)
         $scope.sortReverse = !$scope.sortReverse;
      else {
         $scope.sortType = sortType;
         $scope.sortReverse = false;
      }
   };
  
   $(document).ready(function() {
      $('[data-toggle="tooltip"]').tooltip({
         trigger: "hover",
         placement: "top",
         delay: {
            show: 500,
            hide: 100
         }
      });
   });
   $scope.projects = [{
         a: "G",
         b: "123",
         c: "1",
         d: "D6",
         e: "O1",
         f: "B"
      }, {
         a: "R",
         b: "406",
         c: "2",
         d: "D5",
         e: "O2",
         f: "B"
      }, {
         a: "G",
         b: "519",
         c: "3",
         d: "D4",
         e: "O3",
         f: "P"
      }, {
         a: "G",
         b: "867",
         c: "4",
         d: "DK",
         e: "O4",
         f: "B"
      }, {
         a: "R",
         b: "654",
         c: "5",
         d: "D2",
         e: "O5",
         f: "P"
      }, {
         a: "R",
         b: "321",
         c: "6",
         d: "D1",
         e: "O6",
         f: "P"
      }, {
         a: "G",
         b: "123",
         c: "7",
         d: "D6",
         e: "O1",
         f: "B"
      }, {
         a: "R",
         b: "456",
         c: "8",
         d: "D5",
         e: "O2",
         f: "B"
      }, {
         a: "G",
         b: "789",
         c: "9",
         d: "D4",
         e: "O13",
         f: "P"
      }, {
         a: "G",
         b: "987",
         c: "10",
         d: "D3",
         e: "O4",
         f: "B"
      }, {
         a: "R",
         b: "654",
         c: "11",
         d: "D2",
         e: "O5",
         f: "P"
      }, {
         a: "G",
         b: "321",
         c: "12",
         d: "D1",
         e: "O6",
         f: "P"
      },

      {
         a: "G",
         b: "301",
         c: "13",
         d: "D1",
         e: "O6",
         f: "P"
      },
   ];

   $scope.sortType = 'c';
   $scope.sortReverse = false;

});

<!doctype html>
<html lang="en" ng-app="myApp" ng-controller="maincontroller">

<head>

   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
   <script src="script.js"></script>
   <script data-require="[email protected]" data-semver="0.12.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.min.js"></script>
   <link rel="stylesheet" href="style.css" />
</head>
<body>
   <div id="divfix">
  <br>
  <div class="col-md-10">
     <div id="tbl">
        <table class="table table-hover table-bordered" id="projlist">
           <thead>
              <tr>
                 <th class="status borderless" id="brdrhide"></th>

                 <th tabindex="30" style="border:2px solid #C7CED1;" id="refwidth1" class="refwidth" ng-keypress="setSortingColumn('b')" ng-click="setSortingColumn('b')">Ref
                    <span ng-show="sortType != 'b'" class="glyphicon glyphicon-chevron-down glyphiconsort tablepoint pull-right"></span>
                    <span ng-show="sortType == 'b' && !sortReverse" alt="Sort A to Z" class="glyphicon glyphicon-chevron-down glyphiconsort tablepoint pull-right"></span>
                    <span ng-show="sortType == 'b' && sortReverse" alt="Sort Z to A" class="glyphicon glyphicon-chevron-up glyphiconsort tablepoint pull-right"></span></th>

                 <th tabindex="40" style="border:2px solid #C7CED1;" class="servwidth" ng-keypress="setSortingColumn('c')" ng-click="setSortingColumn('c')">Service
                    <span ng-show="sortType != 'c'" class="glyphicon glyphicon-chevron-down glyphiconsort tablepoint pull-right"></span>
                    <span ng-show="sortType == 'c' && !sortReverse" alt="Sort A to Z" class="glyphicon glyphicon-chevron-down glyphiconsort tablepoint pull-right"></span>
                    <span ng-show="sortType == 'c' && sortReverse" alt="Sort Z to A" class="glyphicon glyphicon-chevron-up glyphiconsort tablepoint pull-right"></span></th>

                 <th tabindex="50" style="border:2px solid #C7CED1;" ng-keypress="setSortingColumn('d')" ng-click="setSortingColumn('d')">Domain
                    <span ng-show="sortType != 'd'" class="glyphicon glyphicon-chevron-down glyphiconsort tablepoint pull-right"></span>
                    <span ng-show="sortType == 'd' && !sortReverse" alt="Sort A to Z" class="glyphicon glyphicon-chevron-down glyphiconsort tablepoint pull-right"></span>
                    <span ng-show="sortType == 'd' && sortReverse" alt="Sort Z to A" class="glyphicon glyphicon-chevron-up glyphiconsort tablepoint pull-right"></span></th>

                 <th tabindex="60" style="border:2px solid #C7CED1;" ng-keypress="setSortingColumn('e')" ng-click="setSortingColumn('e')">Service Owner
                    <span ng-show="sortType != 'e'" class="glyphicon glyphicon-chevron-down glyphiconsort tablepoint pull-right"></span>
                    <span ng-show="sortType == 'e' && !sortReverse" alt="Sort A to Z" class="glyphicon glyphicon-chevron-down glyphiconsort tablepoint pull-right"></span>
                    <span ng-show="sortType == 'e' && sortReverse" alt="Sort Z to A" class="glyphicon glyphicon-chevron-up glyphiconsort tablepoint pull-right"></span></th>

                 <th tabindex="70" style="border:2px solid #C7CED1;" ng-keypress="setSortingColumn('f')" ng-click="setSortingColumn('f')">Lifecycle
                    <span ng-show="sortType != 'f'" class="glyphicon glyphicon-chevron-down glyphiconsort tablepoint pull-right"></span>
                    <span ng-show="sortType == 'f' && !sortReverse" alt="Sort A to Z" class="glyphicon glyphicon-chevron-down glyphiconsort tablepoint pull-right"></span>
                    <span ng-show="sortType == 'f' && sortReverse" alt="Sort Z to A" class="glyphicon glyphicon-chevron-up glyphiconsort tablepoint pull-right"></span></th>
              </tr>
           </thead>
           <tbody id="tbl6">
              <tr id="tbl7" class="tt" ng-class="{even: $even, odd: $odd}" data-toggle="tooltip" title="Click for more information on {{x.c}}." ng-click="isCollapsed = !isCollapsed" ng-repeat-start="x in projects | filter:query | filter:myFilter | orderBy:sortType:sortReverse">
                 <td id="brdrhide1" ng-class="{'glyphicon glyphicon-alert icon-success': x.a == 'R'}"><b ng-if="x.a != 'R'"></b>
                    <td id="refwidth" class="shrink">{{x.b}}</td>
                    <td class="shrink"><u>{{x.c}}</u></td>
                    <td class="shrink">{{x.d}}</td>
                    <td class="shrink">{{x.e}}</td>
                    <td class="shrink">{{x.f}}</td>
              </tr>
              <tr collapse="isCollapsed" ng-repeat-end="">
                 <td colspan="6">
                    <h3>Test</h3>
                    <p>Test</p>
                 </td>
              </tr>
           </tbody>
        </table>
     </div>
  </div>
   </div>
   </div>
</body>
</html>

Please take the time to format your code properly before posting the answer, in the current form the code is very hard to read
A good solution, I'll keep that in mind for the future. Thanks for the help!

Collectives™ on Stack Overflow

AngularJS sorting a table

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related