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

您可以这样做：

＆＃13;

＆＃13;

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);
  };
});

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

您还可以通过使角色对象可用于范围来使角色对象在模板中可访问。

＆＃13;

＆＃13;

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];
  };
});

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

＆＃13;

＆＃13;

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;
  };
});

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;