ngTable Detect Sorting in View

Question

Is there a way to detect whether or not ngTable currently has a sort applied? Binding to the sorting table parameter does not work correctly.

<!--- Never shows---->
<label ng-if="tableParams.$params.sorting === {}">No sort applied</label>

<!--- Never shows---->
<label ng-if="tableParams.$params.sorting() === {}">No sort applied</label>

Oddly enough this simple binding example works as expected:

<label>settings={{ tableParams.$params.sorting }}</label>

When a sort is applied a value of: {"sortColumn":"sortDirection"} appears:

{"Id":"desc"} 

or if a sort is not applied:

{}

Any help would be appreciated.

Answer 1

You can do something like this:

var app = angular.module('app', []);

app.controller('myController', function($scope) {
  $scope.angular = angular;
  
  $scope.tableParams = {
    $params: {
      sorting: {}
    }
  };

  $scope.sort = function() {
    $scope.tableParams.$params.sorting[1] = true;
  };

  $scope.unsort = function() {
    delete $scope.tableParams.$params.sorting[1];
  };

  $scope.isSorted = function(tableParams) {
    return !angular.equals({}, tableParams.$params.sorting);
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>

<div ng-app="app">
  <div ng-controller="myController">
    <div ng-show="!isSorted(tableParams)">No sort applied</div>
    <button ng-click=sort()>sort</button>
    <button ng-click=unsort()>unsort</button>
    <br>{{ tableParams }}
  </div>
</div>

You can also make the angular object accessible in templates by making it available to the scope.

var app = angular.module('app', []);

app.controller('myController', function($scope) {
  $scope.angular = angular;
  
  $scope.tableParams = {
    $params: {
      sorting: {}
    }
  };

  $scope.sort = function() {
    $scope.tableParams.$params.sorting[1] = true;
  };

  $scope.unsort = function() {
    delete $scope.tableParams.$params.sorting[1];
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>

<div ng-app="app">
  <div ng-controller="myController">
    <div ng-show="angular.equals({}, tableParams.$params.sorting)">No sort applied</div>
    <div>
      <button ng-click=sort()>sort</button>
      <button ng-click=unsort()>unsort</button>
    </div>
    <div><br>{{ tableParams }}</div>
  </div>
</div>

var app = angular.module('app', []);

app.controller('myController', function($scope) {
  $scope.angular = angular;
  
  $scope.tableParams = {
    $params: {
      sorting: {}
    }
  };

  $scope.sort = function() {
    $scope.tableParams.$params.sorting[1] = true;
  };

  $scope.unsort = function() {
    delete $scope.tableParams.$params.sorting[1];
  };

  $scope.strictlyEqualsEmptyObject = function(obj) {
    return {} === obj;
  };

  $scope.equalsEmptyObject = function(obj) {
    return {} == obj;
  };

  $scope.angularEqualsEmptyObject = function(obj) {
    return angular.equals({}, obj);
  };

  $scope.objectKeysLength = function(obj) {
    return Object.keys(obj).length === 0;
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>

<div ng-app="app">
  <div ng-controller="myController">
    <div>{{ tableParams }}</div>
    <div>
      <button ng-click=sort()>sort</button>
      <button ng-click=unsort()>unsort</button>
    </div>
    
    <table>
      <th>Not sorted check using:</th>
      <tr>
        <td>strict </td>
        <td>{{ strictlyEqualsEmptyObject(tableParams.$params.sorting) }}</td>
      </tr>
      <tr>
        <td>equals </td>
        <td>{{ equalsEmptyObject(tableParams.$params.sorting) }}</td>
      </tr>
      <tr>
        <td>angular </td>
        <td>{{ angularEqualsEmptyObject(tableParams.$params.sorting) }}</td>
      </tr>
      <tr>
        <td>Object.keys </td>
        <td>{{ objectKeysLength(tableParams.$params.sorting) }}</td>
      </tr>
    </table>
  </div>
</div>