Sorting table columns in AngularJS

Question

Sorting table columns in AngularJS

1.3k Views Asked by yuro At 02 April 2025 at 05:36

The following code for sorting table columns doesn't work. I get an Error message:

Error: $injector:unpr Unknown Provider

Unknown provider: orderbyFilterProvider <-

View:

<table class="table table-bordered table-hover">
  <thead>
    <tr>
      <th><a href="" ng-click="reverse=!reverse;order('lname', reverse)">Lastname</a></th>
      <th><a href="" ng-click="reverse=!reverse;order('fname', reverse)">Firstname</a></th>
      <th><a href="" ng-click="reverse=!reverse;order('maxAge', reverse)">Age</a></th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="item in filteredItems = (nameslist | orderBy:predicate)">
      <td>{{ item.lname }}</td>
      <td>{{ item.fname }}</td>
      <td>{{ item.maxAge }}</td>
    </tr>
  </tbody>
</table>

Ctrl:

//Get request to REST API
$scope.nameslist = resService.getAll();

//sort function
var orderby = $filter('orderby');

$scope.order = function (predicate, reverse) {
   $scope.nameslist = orderby($scope.nameslist, predicate, reverse);
};

/* default */
$scope.order('-maxAge', false);

resService:

...
return {
   getAll: function () {
      return requestService.name.query();
   },
...
}

How could I modify the sort function?

Original Q&A

There are 2 best solutions below

**Arathi Sreekumar** · Answer 1

You could use angular's built in orderBy filter, like so for reversing as well:

<table class="table table-bordered table-hover">
  <thead>
    <tr>
      <th><a href="" ng-click="order('lname')">Lastname</a></th>
      <th><a href="" ng-click="order('fname')">Firstname</a></th>
      <th><a href="" ng-click="order('maxAge')">Age</a></th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="item in (nameslist | orderBy:predicate:reverse)">
      <td>{{ item.lname }}</td>
      <td>{{ item.fname }}</td>
      <td>{{ item.maxAge }}</td>
    </tr>
  </tbody>
</table>

And the following order function:

$scope.nameslist = [{maxAge :112,fname:'Amy' ,MiddleName: 'Sue',lname:'Test'},
  {maxAge :15,fname:'Chris' ,MiddleName: 'Deb',lname:'Something'},
  {maxAge :11,fname:'Sue' ,MiddleName: 'Amy',lname:'Abcd'},
  {maxAge :14,fname:'Debby' ,MiddleName: 'Chris',lname:'Try'}
  ];

//sort function
//var orderby = $filter('orderby');
// initializing the filter 
// if you don't want a default filter, you could initialize them to empty
$scope.predicate = 'lname'; 
$scope.reverse = false;

$scope.order = function (filterBy) {
   // if same filter is clicked again, and its not reverse then reverse
   // else just apply the filter
   if ($scope.predicate === filterBy) {
       $scope.reverse = !$scope.reverse;
   } else {
       $scope.reverse = false;
   }
    $scope.predicate = filterBy;
};

The logic behind it is that sending an additional parameter true to the orderBy would reverse it, So we are just using this to reverse.

Also your error could have been because of this line:

<tr ng-repeat="item in filteredItems = (nameslist | orderBy:predicate)">

which should be:

<tr ng-repeat="item in (nameslist | orderBy:predicate:reverse)">

Here is the plunker that works:

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

**RIYAJ KHAN** · Answer 2

Here what I have tried

Updated html.

<body ng-controller="testCtrl">

    <table class="table table-bordered table-hover">
  <thead>
    <tr>
      <th><a href="" ng-click="reverse=!reverse;predicate = 'lname'">Lastname</a></th>
      <th><a href="" ng-click="reverse=!reverse;predicate = 'fname'">Firstname</a></th>
      <th><a href="" ng-click="reverse=!reverse;predicate = 'maxAge '">Age</a></th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="item in nameslist | orderBy:predicate:reverse">
      <td>{{ item.lname }}</td>
      <td>{{ item.fname }}</td>
      <td>{{ item.maxAge }}</td>
    </tr>
  </tbody>
</table>
</body>



app.controller("testCtrl",['$scope','$filter',function($scope,$filter){
        $scope.nameslist = [{maxAge :112,fname:'first1' ,MiddleName: 'middle1',lname:'last1'},
      {maxAge :15,fname:'first2' ,MiddleName: 'middle1',lname:'last1'},
      {maxAge :11,fname:'first3' ,MiddleName: 'middle2',lname:'last2'},
      {maxAge :14,fname:'first4' ,MiddleName: 'middle3',lname:'last1'}
      ];

There is no need of custom filter.

Here is the Plunker

Sorting table columns in AngularJS

There are 2 best solutions below

Related Questions in JAVASCRIPT

Related Questions in ANGULARJS

Related Questions in ANGULARJS-SCOPE

Related Questions in ANGULARJS-FILTER

Related Questions in ANGULAR-FILTERS

Trending Questions

Popular # Hahtags

Popular Questions