CODEWITHSUNDEEP
javascriptangularjs
erp
erp

Reputation: 3034

Sort by all columns in table pure angular

I am trying to give a table the ability to sort by all columns, but having a bit of trouble. I am pulling some data from a webservice to populate the table but then want to sort wherever the user wants. I have a plunker here. Of my close attempt. I was thinking something like this:

$scope.order = function(predicate, reverse) {
      $scope.recentalerts = orderBy($scope.recentalerts, predicate, reverse);
    };

like from the angular website might work, but am having a bit of trouble integrating it into my own table. What am I doing wrong? Or is there an easier way to do so? I'd like to just stick with plain angular like this example.

Upvotes: 1

Views: 316

Answers (2)

floribon
floribon

Reputation: 19193

Your example is working (after fixing the plunkR), however you always force reverse to false.

If you want to reproduce what Angular do, which is inverse the reverse parameter on each click, you could for instance add somehting like this:

$scope.orders[predicate] = !$scope.orders[predicate];
$scope.recentalerts = orderBy($scope.recentalerts, predicate, $scope.orders[predicate]);

See working plunkr:

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

Or in a simpler form, use a common $scope.reverse attribute:

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

Upvotes: 2

bamblack
bamblack

Reputation: 3779

Here's a snippet of what I use for rolling my own sorting in tables. Simply using a string to determine what property I want to sort by (with reverse supported) and changing it dynamically, then using orderBy on the ng-repeat.

Hope this helps.

angular.module('app', [])
  .controller('testCtrl', ['$scope',
    function($scope) {
      $scope.sortBy = 'ID';
      $scope.sort = function(sortBy) {
        if ($scope.sortBy == sortBy) {
          $scope.sortBy = '-' + sortBy
        } else {
          $scope.sortBy = sortBy;
        }
      }

      $scope.people = [{
        'ID': 1,
        'Name': 'Aaron',
        'Age': 70
      }, {
        'ID': 28,
        'Name': 'Ben',
        'Age': 60
      }, {
        'ID': 2,
        'Name': 'Claire',
        'Age': 50
      }, {
        'ID': 14,
        'Name': 'Damian',
        'Age': 40
      }, {
        'ID': 8,
        'Name': 'Frank',
        'Age': 30
      }];
    }
  ]);
<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css" rel="stylesheet"/>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>

<body ng-app="app">
  <div ng-controller="testCtrl">
    <div id="wrapper">
      <div style="margin: 1em">
        <h4>Recent Alerts</h4>
        <div>
          <table class="table table-hover table-striped">
            <thead>
              <tr>
                <th ng-click="sort('ID')">ID
                  <i class="fa fa-caret-down" ng-show="sortBy=='-ID'"></i>
                  <i class="fa fa-caret-up" ng-show="sortBy=='ID'"></i>
                </th>
                <th ng-click="sort('Name')">Name
                  <i class="fa fa-caret-down" ng-show="sortBy=='-Name'"></i>
                  <i class="fa fa-caret-up" ng-show="sortBy=='Name'"></i>
                </th>
                <th ng-click="sort('Age')">Age
                  <i class="fa fa-caret-down" ng-show="sortBy=='-Age'"></i>
                  <i class="fa fa-caret-up" ng-show="sortBy=='Age'"></i>
                </th>
              </tr>
            </thead>
            <tbody>
              <tr data-ng-repeat="person in people | orderBy: sortBy">
                <td ng-bind="person.ID"></td>
                <td ng-bind="person.Name"></td>
                <td ng-bind="person.Age"></td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <!-- /.col-lg-12 -->
    </div>
  </div>
</body>

</html>

Upvotes: 1

Related Questions