Question

使用Angular，我正在执行http请求以获取数据。我添加了ngTable并使用它来显示数据。它们正确显示在表格中，但我无法对其进行过滤，排序和删除。为什么？

JS：

      $scope.cancel = cancel;

function cancel(row, rowForm) {
  var originalRow = resetRow(row, rowForm);
  angular.extend(row, originalRow);
}

$scope.tableParams.reload().then(function(data) {
  if (data.length === 0 && $scope.tableParams.total() > 0) {
    $scope.tableParams.page($scope.tableParams.page() - 1);
    $scope.tableParams.reload();
  }
});

  $http.get('my_url')
.success(function(data, status) {
  $scope.data = data;

  $scope.tableParams = new ngTableParams({
    page: 1,            // show first page
    count: 10          // count per page
  }, {
    total: $scope.data.length, // length of data
    getData: function($defer, params) {
      // use build-in angular filter
      var orderedData = params.sorting() ?
        $filter('orderBy')($scope.data, params.orderBy()) :
        $scope.data;

      $defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
    }
  });
});

HTML：

    <table ng-table="tableParams" show-filter="true" class="table table-bordered table-striped">
  <tr ng-repeat="row in data track by row.id">
    <td title="'Id'" filter="{id: 'text'}" sortable="'id'">{{row.id}}</td>
    <td title="'Company'" filter="{company: 'text'}" sortable="'company'">{{row.company}}</td>
    <td title="'Email'" filter="{email: 'text'}" sortable="'email'">{{row.email}}</td>
    <td title="'Note'" filter="{note: 'text'}" sortable="'note'">{{row.note}}</td>
    <td>
      <button class="btn btn-default btn-sm" ng-click="cancel(row, rowForm)"><span class="glyphicon glyphicon-remove"></span></button>
    </td>
  </tr>
</table>

Answer 1

您未在getData方法中应用任何过滤器。

首先，您需要过滤数据，然后排序：

getData: function($defer, params) {
  // I will use a copy of the data to always start with the original data 
  // array ($scope.data). If you are getting the data with $resource or $http
  // you can replace the $scope.data with the data obtained (eg.: response.data)
  var theData = angular.copy($scope.data);

  // First we filter using the filter object provided by the
  // method 'filter()' of ngTableParams instance.
  var filterObj = params.filter(),
      filteredData = $filter('filter')($scope.data, filterObj);

  // Then we sort the FILTERED DATA ARRAY
  // NOTICE that the first parameter provided to $filter('orderBy')
  // is the filtered array <filteredData> and not the original
  // data array.
  var sortObj = params.sorting(),
      orderedData = $filter('orderBy')(filteredData, sortObj);

  // Then we return the final data array (orderedData)
  $defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
}

如何在ngTable中过滤

1 个答案: