Question

我为列表开发了分页，我坚持一件事，我使用ng-repeat进行页数，但是当结果更多说1000时，它显示1 2 3 4到100，它看起来不太好一次显示所有页面计数。所以我想把页面数量显示为9，即如果它是第一页，页面计数将看起来像

1 2 3 4 5 6 7 ... 100

如果是第50页，则应显示计数列表

1 ... 48 49 50 51 52 ... 100

如果是第100页，则应显示计数列表

1 ... 94 95 96 97 98 99 100

这会消耗很小的空间，看起来也不错。

Here是我迄今为止所做的。

由于某些其他原因，我不能仅使用任何其他库进行分页。

angular.module('myApp', [])
  .controller("myController", function($scope) {
    $scope.values = (function() {
      var arr = [];
      for (var a = 0; a < 1000; a++) {
        var text = "";
        var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";

        for (var i = 0; i < 5; i++)
          text += possible.charAt(Math.floor(Math.random() * possible.length));
        arr.push(text)
      }
      return arr;
    })();
  }).filter('range', function() {
    return function(val, limit) {
      var arr = [];
      val = val / limit;
      for (var i = 0; i < val; i++) {
        arr.push(i);
      }
      return arr;
    }
  }).filter('slice', function() {
    return function(arr, end, start) {
      start = start || 0;
      return (arr || []).slice(start, start + end);
    };
  });

li {
  cursor: pointer;
}
li:hover {
  background-color: #F00;
  color: #FFF;
}
.pagination li {
  display: inline-block;
}
.pagination li label span {
  padding: 5px;
  display: inline-block;
  cursor: pointer;
}
.pagination li label input {
  display: none;
}
.pagination li label input:checked+span {
  background-color: #F0F;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myController">
  <div style="border:1px solid #F00">
    <div ng-init="limit=10;start=0;">
      <div style="border:1px solid #F00; display:inline-block;width:500px">
        Pages:
        <ul class="pagination">
          <li ng-repeat="count in values.length|range:limit">
            <label ng-click="$parent.start=count">
              <input type="radio" name="pages" ng-checked="$index==0" />
              <span>{{count+1}}</span>
            </label>
          </li>
        </ul>
      </div>
      <div style="border:1px solid #F00; display:inline-block;">
        Results Per page
        <ul class="pagination">
          <li ng-repeat="lim in [10,20,30,40]">
            <label ng-click="$parent.limit=lim;$parent.start=0">
              <input type="radio" name="records" ng-checked="$index==0" />
              <span>{{lim}}</span>
            </label>
          </li>
        </ul>
      </div>
      <ul>
        <li ng-repeat="val in values|slice:limit:start*limit">{{$index+1}} {{ val}}</li>
      </ul>
    </div>
  </div>
</div>

Answer 1

经过一些RnD并实现了一些逻辑后，我成功了。 Here是代码。

＆＃13;

angular.module('myApp', [])
  .controller("myController", function($scope) {
    $scope.values = (function() {
      var arr = [];
      for (var a = 0; a < 1000; a++) {
        var text = "";
        var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";

        for (var i = 0; i < 5; i++)
          text += possible.charAt(Math.floor(Math.random() * possible.length));
        arr.push({
          val: text
        })
      }
      return arr;
    })();
  }).filter('range', function() {
    return function(val, limit, current) {
      var arr = [];
      val = val / limit;
      if (current < 6) {

        for (var i = 0; i < 8; i++)
          arr.push(i);
        arr.push("...");
        arr.push(val - 1)
      } else if (current > (val - 5)) {
        arr.push(0)
        arr.push("...");
        for (var i = val - 7; i < val; i++)
          arr.push(i);
      } else {
        arr.push(0);
        arr.push("...")
        arr.push(current - 3);
        arr.push(current - 2);
        arr.push(current - 1);
        arr.push(current);
        arr.push(current + 1);
        arr.push("....")
        arr.push(val - 1)
      }
      return arr;
    }
  }).filter('slice', function() {
    return function(arr, end, start) {
      start = start || 0;
      return (arr || []).slice(start, start + end);
    };
  }).filter('isNum', function() {
    return function(val) {
      return !isNaN(val)
    };
  });

＆＃13;

li {
  cursor: pointer;
}
li:hover {
  background-color: #F00;
  color: #FFF;
}
.pagination li {
  display: inline-block;
}
.pagination li label span {
  padding: 5px;
  display: inline-block;
  cursor: pointer;
}
.pagination li label input {
  display: none;
}
.pagination li label input:checked+span {
  background-color: #F0F;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myController">
  <div style="border:1px solid #F00">
    <div ng-init="limit=10;start=0;">
      <div style="border:1px solid #F00; display:inline-block;width:500px">
        Pages:
        <ul class="pagination">
          <li ng-repeat="count in values.length|range:limit:start+1">
            <label>
              <input ng-if="count|isNum" type="radio" name="pages" ng-checked="$index==0" />
              <span ng-if="count|isNum" ng-click="$parent.$parent.start=count">{{count+1}}</span>
              <span ng-if="!(count|isNum)">{{count}}</span>
            </label>
          </li>
        </ul>
      </div>
      <div style="border:1px solid #F00; display:inline-block;">
        Results Per page
        <ul class="pagination">
          <li ng-repeat="lim in [10,20,30,40]">
            <label ng-click="$parent.limit=lim;$parent.start=0">
              <input type="radio" name="records" ng-checked="$index==0" />
              <span>{{lim}}</span>
            </label>
          </li>
        </ul>
      </div>
      <ul>
        <li ng-repeat="val in values|slice:limit:start*limit">{{$index+1}} {{ val.val}}</li>
      </ul>
    </div>
  </div>
</div>

＆＃13;

Answer 2

我有fiddle来回答您的问题。

.filter('range', function () {
return function (val, limit, current) {
    var arr = [];

    var visibility = 3;
    var threshold = 7;
    var elemPerPage = 10;

    val = val / limit;

    if (current <= threshold - visibility) { // begining
        for (var i = 0; i < threshold; i++) {
            arr.push(i + 1);
        }
        arr.push("...");
        arr.push(val);
    } else if (current >= val - visibility) { // end
        arr.push(1);
        arr.push("...");
        for (var i = val - threshold + 1; i <= val; i++) {
            arr.push(i);
        }
    } else { // middle
        arr.push(1);
        arr.push("...");
        for (var i = current - visibility + 1; i < current + visibility; i++) {
            arr.push(i);
        }
        arr.push("..");
        arr.push(val);
    }

    return arr;
}
})

我刚刚对过滤器进行了改进，以便您有3种类型的返回，具体取决于当前页面是否接近开头，结尾或者是否位于中间位置。

我为当前页面添加了一个变量，但我想你会插入其余部分，然后你就会恢复工作。

希望它有所帮助！

从ng-repeat中删除一些记录并显示点

2 个答案: