AngularJS

Question

我正在使用 ui-bootstrap 分页，当所有结果都包含在一个页面上时，我想隐藏分页控件。如下图所示，只有一页，控件仍在显示。 ui-bootstrap 团队将其本地包含在框架中似乎是常识。所以我在想可能有一种方法可以轻松地做到这一点，但我不知道从哪里开始。

控制器中的代码如下：

$scope.itemsPerPage = 5;
$scope.currentPage = 1;
$scope.maxSize = 4;

这里是 HTML:

<div ng-controller="observedCars">
  <div ng-repeat="obv in observed['Observed CARs'] | startFrom:(currentPage - 1) * itemsPerPage | limitTo: itemsPerPage">
    <div class="carId">{{ obv['Display Name'] }}</div>
  </div>
  <ul uib-pagination total-items="observed['Observed CARs'].length" ng-model="currentPage" items-per-page="itemsPerPage" ng-change="pageChanged()" max-size="maxSize"></ul>
</div>

我希望有人已经做过同样的事情并且可以提供帮助。

提前致谢。

Answer 1

您可以通过添加 ng-hide 手动完成：

<div ng-controller="observedCars">
  <div ng-hide="observed['Observed CARs'].length == 1" ng-repeat="obv in observed['Observed CARs'] | startFrom:(currentPage - 1) * itemsPerPage | limitTo: itemsPerPage">
    <div class="carId">{{ obv['Display Name'] }}</div>
  </div>
  <ul uib-pagination total-items="observed['Observed CARs'].length" ng-model="currentPage" items-per-page="itemsPerPage" ng-change="pageChanged()" max-size="maxSize"></ul>
</div>

这可能不是最好的方法，可能 ui-bootstrap 有办法解决这个问题，但我也找不到。

无论如何，这种方式 angular 将检查那里是否只有一个元素，如果它的长度不是 1 它将隐藏 div 与 ng-repeat 时相同的方式空。

Answer 2

对 ul 标签使用 data-ng-show，例如

  <ul uib-pagination total-items="observed['Observed CARs'].length"  data-ng-show="observed['Observed CARs'].length > itemsPerPage" ng-model="currentPage" items-per-page="itemsPerPage" ng-change="pageChanged()" max-size="maxSize"></ul>

AngularJS - ui - bootstrap 分页。在单个页面上隐藏按钮

AngularJS - ui-bootstrap pagination. Hide buttons on single page

javascript

jquery

pagination

angular-ui-bootstrap