Question

在angularjs的学习过程中，我刚创建了一个带分页的表。这是代码

HTML

 <table class="table">
      <thead>
        <tr>
          <th>ID</th>
          <th>NAME</th>
          <th>EMAIL</th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="user in data | range:selectedPage:pageSize">
          <td>{{user.id}}</td>
          <td>{{user.name}}</td>
          <td>{{user.email}}</td>
        </tr>
      </tbody>
    </table>
    <div class="pull-right btn-group">
      <a ng-repeat="page in data | filter:pageCount:pageSize" ng-click="selectPage($index + 1)" class="btn btn-default" ng-class="getPageClass($index + 1)">
    {{$index + 1}}
    </a>
    </div>
  </div>

JS

var exampleTable = angular.module('exampleTable', []);
exampleTable.controller('exampleTableCont', function($scope) {
  $scope.data = [{
    "id": 1,
    "name": "john",
    "email": "john@john.com"
  }, {
    "id": 3,
    "name": "william",
    "email": "william@test.com"
  }, {
    "id": 2,
    "name": "clark",
    "email": "clark@test.com"
  }, {
    "id": 5,
    "name": "Brian",
    "email": "Brian@Brian.com"
  }, {
    "id": 4,
    "name": "smith",
    "email": "smith@smith.com"
  }, {
    "id": 6,
    "name": "chris",
    "email": "chris@test.com"
  }, {
    "id": 7,
    "name": "june",
    "email": "june@june.com"
  }];
  $scope.selectedPage = 1;
  $scope.pageSize = 3;
  $scope.selectPage = function(newPage) {
    $scope.selectedPage = newPage;
  }
  $scope.getPageClass = function(page) {
    return $scope.selectedPage == page ? "btn-primary" : "";
  }
});

exampleTable.filter("pageCount", function() {
  return function(data, size) {
    if (angular.isArray(data)) {
      var result = [];
      for (var i = 0; i < Math.ceil(data.length / size); i++) {
        result.push(i);
      }
      console.log(result);
      return result;
    } else {
      return data;
    }
  }
});
exampleTable.filter("range", function($filter) {
  return function(data, page, size) {
    if (angular.isArray(data) && angular.isNumber(page) && angular.isNumber(size)) {
      var start_index = (page - 1) * size;
      if (data.length < start_index) {
        return [];
      } else {
        console.log($filter("limitTo")(data.splice(start_index), size));
        return $filter("limitTo")(data.splice(start_index), size);
      }
    } else {
      return data;
    }
  }
});

以下是plunker

我尝试安装range过滤器，同时这样做我看到它运行了两次。第一次使用3行数据，第二次使用空数组。由于它返回空数组表未绘制。

我可以知道它为什么返回空数组而不是3数组。如何克服这个？

pageCount过滤器也无法按预期工作，但此处pageCount过滤器甚至无法运行一次。

Answer 1

<tr ng-repeat="user in data | range:user:selectedPage:pageSize">

您没有向过滤器发送数据。更新这个。可能会帮助你（y）

Answer 2

我发现了这个错误。我使用splice方法直接在源数组本身上工作。

虽然过滤器不会影响$ scope.data，但会影响指令数据。由于过滤器多次运行，它会一次又一次地删除数据，从而导致空数组。因此没有绘制表格。

$filter("limitTo")(data.splice(start_index), size);

以

$filter("limitTo")(data.slice(start_index), size);

以下是更新后的plunker

angularjs ng-repeat with filter第二次返回空数组

2 个答案: