Sorting table columns in AngularJS

Question

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?

Please could you tell me if you remove all your filter and the code works, i.e <tr ng-repeat="item in nameslist "> works and then if you hardcode your filter to <tr ng-repeat="item in (nameslist | orderBy:'lname':true)"> and see if that works. — Arathi Sreekumar
– Arathi Sreekumar, Commented Jun 26, 2015 at 16:07

RIYAJ KHAN · Accepted Answer · 2015-06-26 14:25:13Z

1

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

answered Jun 26, 2015 at 14:25

RIYAJ KHAN

15.3k5 gold badges34 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

yuro Over a year ago

I think for larger applications I need to use a filter.

Arathi Sreekumar Over a year ago

I think you have the order by spot on. I was mistaken in thinking I could pass the two arguments as one scope variable. Thanks!

RIYAJ KHAN Over a year ago

with too much complicated conditions in filter you should use custom filter.

Arathi Sreekumar · Accepted Answer · 2015-06-26 16:00:45Z

0

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

edited Jun 26, 2015 at 16:00

answered Jun 26, 2015 at 13:45

Arathi Sreekumar

2,5841 gold badge19 silver badges29 bronze badges

2 Comments

yuro Over a year ago

That is not correct. I'm getting the same error when I try <tr ng-repeat="item in (nameslist | orderBy:predicate)">

Arathi Sreekumar Over a year ago

I have added a working plunker with my code. Is it possible that your result itself is not getting displayed?

Collectives™ on Stack Overflow

Sorting table columns in AngularJS

2 Answers 2

3 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related