web-dev-qa-db-ja.com

初期化時に現在のページをリセットするui-bootstrapページネーション

私は、ui-bootstrap（angular-bootstrap）ライブラリのページネーションディレクティブを使用しています。初期化時に問題が発生しています。 URL経由で特定のページに移動すると、問題が発生します。

起こっているのは、コントローラーが$ stateParamsからの正しいページで初期化され、次にページネーションディレクティブがページを1にリセットするng-change関数を初期化してトリガーすることです。これでon-select-pageは使用されなくなりましたユーザーのクリックのみをキャプチャしてページを変更する方法ページがリセットされないように、コントローラの前にディレクティブを初期化することが理想です。前もって感謝します。

必要に応じてコードを含めることができますが、私の質問には必ずしもコードブロックが必要ではないと感じています。

angularjspaginationangular-ui-bootstrap
39
pcgilday

そこで、角度ブートストラップコードを掘り下げた後、解決策を見つけました。彼らのコードは、現在のページがtotalPages値よりも大きいかどうかをチェックするtotalPagesを監視しています。

角度ブートストラップコード：

if ( $scope.page > value ) {
  $scope.selectPage(value);
} else {
  ngModelCtrl.$render();
}

起こっていたのは、ページ3でページを更新した場合（たとえば）、コントローラーがそのページのアイテムを一時的にリロードし、total-itemsが0になり、totalPagesが1として計算されたためです。

私の解決策は、total-items（およびtotalTotals）が常に正確になるように、アイテムを状態解決にロードすることでした。

44
pcgilday

データの状態解決を使用したくない場合は、paginatorにng-ifディレクティブを追加するだけで済みます。 $scope.total_countを使用してtotal-items属性にバインドすると仮定すると、次のようなことができます。

<pagination data-ng-if="total_count"
            total-items="total_count"
            ng-model="applied_filters.page"
            max-size="maxSize"
            class="pagination-sm"
            boundary-links="true"
            rotate="false"
            class="nomargin"
            num-pages="numPages"></pagination>

このように、サーバーからの合計カウントがある場合、ディレクティブは常に初期化されます。currentPageはtotalPagesより大きくなりません。

39
Mudassir Ali

ng-ifディレクティブは期待どおりに機能しませんでした（controllerAs構文を使用しませんでした）：ページネーションは$scope.currentPage変数を更新できなくなりました。解決策は、ng-model="$parent.currentPage"の代わりにng-model="currentPage"を使用することでした。

<uib-pagination ng-if="totalItems"
                total-items="totalItems"
                items-per-page="itemsPerPage"
                ng-model="$parent.currentPage">
</uib-pagination>
8
theluckyluke

この問題の解決策は、Githubで見つけて実装し、完全に機能しました。

他の回答でも述べたように、問題はtotalItemsにあり、2/3/nページに移動しようとすると、totalItemsが一時的に0になり、その過程でcurrentPage値が1になり、目的のページに移動できません。だから、私のトリックは、サーバーからデータを呼び出す前に、totalItemsとしてより大きな数を設定し、サーバーからデータを受け取った後、totalItemsを更新することです。

$scope.totalItems = 1000;
QuotationService.getQuotations(url).then(function ( response ) {

     $scope.totalItems = response.data.total;
     $scope.quotations = response.data.data;
     $scope.isTableLoading = false;

});

私の見解では、isTableLoadingがfalseである場合にのみ、ページネーションを表示します。そうでない場合、ページネーションは間違ったページ数を表示します。

<div class="text-center" ng-show="isTableLoading == false">
     <uib-pagination boundary-links="true"  
           total-items="totalItems"
           items-per-page="15" max-size="15" ng-model="currentPage"
           class="pagination-sm" previous-text="&lsaquo;"
           next-text="&rsaquo;" first-text="&laquo;" last-text="&raquo;">
     </uib-pagination>
</div>

今ではすべてが完璧に機能しています。

1
Ariful Haque

状態解決の代替方法は、一度わかったら、値モジュールに合計項目を設定することです。同じように、実際には上記の回答についてコメントしたかったのですが、必要なポイントがありませんでした。説明をありがとう、助けてくれました！

0
Housty

ページの読み込み時にページを設定する場合は、 ここで説明するようにモデルを読み込みます

ウェブサイトから：

<pagination total-items="totalItems" ng-model="currentPage" ng-change="pageChanged()">
</pagination>

あなたはすでにそこを見ていると確信しているので、コントローラの初期化時にモデルが適切に設定されていない場合、明らかに問題が発生するでしょう。 $scope.currentPageを使用している別の場所で上書きされる可能性がある場合もあります。コードなしで簡単だと感じるかもしれませんが、HTMLとAngularを参照しているコントローラーを投稿することをお勧めします。

0
TommyMac