Sorting in not working in angularJS using ng-repeat

Question

I am not able to sort my table if I am using ng-repeat to create header.
I have listed my issue at http://plnkr.co/edit/5vjsRdRLTFgXhvqHVkWA?p=preview
On click of header table sorting should happen, but it is not working fine.

HTML Code :

  <table border="1">
    <thead>
      <tr>
        <th ng-repeat="key in getKeysOfCollection(colors[0])" ng-click="predicate = key; reverse=!reverse;">
          {{key}}
        </th>
      </tr>
      <tr>
        <th ng-repeat="key in getKeysOfCollection(colors[0])">
          <input type="text" ng-model="search[key]"  />
        </th>
      </tr>
    </thead>
    <tbody>
        <tr ng-repeat="item in colors | filter:search | orderBy:predicate:reverse">
          <td ng-repeat="key in getKeysOfCollection(item)">{{item[key]}}</td>
        </tr>

    </tbody>
  </table>

JS Code :

  $scope.search = {};

  $scope.colors = [{
    'id': 1,
    'productId': 1001,
    'productName': 'prd 1',
    'minimumLevel': 2,
    'price': 12.50,
    'productDate': '2014-11-01T06:41:30.809Z'
  }, {
    'id': 2,
    'productId': 1002,
    'productName': 'prd 2',
    'minimumLevel': 23,
    'price': 12.54,
    'productDate': '2014-11-02T06:41:30.809Z'
  }, {
    'id': 3,
    'productId': 1003,
    'productName': 'prd 3',
    'minimumLevel': 2,
    'price': 12.50,
    'productDate': '2014-11-04T06:41:30.809Z'
  }, {
    'id': 4,
    'productId': 1004,
    'productName': 'prd 4',
    'minimumLevel': 2,
    'price': 12.50,
    'productDate': '2014-11-22T06:41:30.809Z'
  }, {
    'id': 5,
    'productId': 1005,
    'productName': 'prd 5',
    'minimumLevel': 2,
    'price': 12.50,
    'productDate': '2014-11-18T06:41:30.809Z'
  }];

  $scope.getKeysOfCollection = function(obj) {
    obj = angular.copy(obj);
    if (!obj) {
      return [];
    }
    return Object.keys(obj);
  }

Josep · Accepted Answer · 2014-11-07 04:44:35Z

1

This is happening because ng-repeat creates a new scope, therefore predicate and reverse are being updated in the scope of the first ng-repeat, but they are not available in the scope of the second ng-repeat.

A possible way to fix this would be:

Define predicate and reverse as properties of your controller, like this:

app.controller('MainCtrl', function($scope) {
  this.predicate='id';
  this.reverse=false;
  ...

And change your view like this:

  <body ng-controller="MainCtrl as ctrl">
  Predicate: {{predicate}}
  <table border="1">
    <thead>
      <tr>
        <th ng-repeat="key in getKeysOfCollection(colors[0])" 
            ng-click="ctrl.predicate = key; ctrl.reverse=!ctrl.reverse;">
          {{key}}
        </th>
      </tr>
      <tr>
        <th ng-repeat="key in getKeysOfCollection(colors[0])">
          <input type="text" ng-model="search[key]"  />
        </th>
      </tr>
    </thead>
    <tbody>
     <tr ng-repeat="item in colors|filter:search|orderBy:ctrl.predicate:ctrl.reverse">
       <td ng-repeat="key in getKeysOfCollection(item)">{{item[key]}}</td>
     </tr>
    </tbody>
  </table>
  </body>

Working Example

edited Nov 7, 2014 at 4:44

answered Nov 7, 2014 at 4:39

Josep

13.1k2 gold badges44 silver badges45 bronze badges

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

2 Comments

Sachin Over a year ago

I have one more issue regarding sorting icons, if I click header I am not able to show proper sorted icon : plnkr.co/edit/UonOgNz0s16iKJkWLwyg?p=preview

Josep Over a year ago

@SachinKumbharkar I'm not sure, but I think that what you are trying to do is this: plnkr.co/edit/d1O7kWOqvFxLJ8mqIFLY?p=preview

Collectives™ on Stack Overflow

Sorting in not working in angularJS using ng-repeat

HTML Code :

JS Code :

1 Answer 1

Working Example

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

HTML Code :

JS Code :

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related