ngTable 在视图中检测排序

Question

有没有办法检测 ngTable 当前是否应用了排序？绑定到 sorting table 参数无法正常工作。

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

您还可以使 angular 对象在范围内可用，从而使其在模板中可访问。

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>

ngTable 在视图中检测排序

ngTable Detect Sorting in View

sorting

angularjs

ngtable