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

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;

});






   
   
   
   
   
   
   
   
   


   
  

  
     
        
           
              
                 

                 Ref
                    
                    
                    

                 Service
                    
                    
                    

                 Domain
                    
                    
                    

                 Service Owner
                    
                    
                    

                 Lifecycle
                    
                    
                    
              
           
           
              
                 
                    {{x.b}}
                    {{x.c}}
                    {{x.d}}
                    {{x.e}}
                    {{x.f}}
              
              
                 
                    Test
                    Test

AngularJS sorting a table

Answers (1)

Related Questions