ngTable обнаруживает сортировку в представлении

Question

Есть ли способ определить, применяется ли в настоящее время сортировка ngTable? Привязка к sorting Параметр таблицы не работает правильно.

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

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

Как ни странно, этот простой пример связывания работает как положено:

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

Когда сортировка применяется значение: {"sortColumn":"sortDirection"} появляется:

{"Id":"desc"} 

или если сортировка не применяется:

{}

Любая помощь будет оценена.

Answer 1

Вы можете сделать что-то вроде этого:

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>

Вы также можете сделать угловой объект доступным в шаблонах, сделав его доступным для области.

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>