AngularJS-ui-bootstrap分頁。 在單頁上隱藏按鈕

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

將data-ng-show用於ul標簽，例如

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

Answer 2

您可以通過添加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，它將像ng-repeat為空時一樣隱藏div。