web-dev-qa-db-ja.com

Angular UI Bootstrapページネーションng-モデルが更新されていません

プロジェクトでUI Bootstrap Paginationディレクティブを使用しようとしていますが、奇妙な理由で、現在のページの更新に使用されるng-modelが機能していません。ページネーションが正しく表示されています。タブの数とすべてが正しいのですが、別の数をクリックすると、ng-model変数が更新されません。私の人生では、なぜそうしないのかわかりません。

私が使用しているコードは、UI Bootstrapホームページの例から抜粋したものです：

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

コントローラは次のようになります。

$scope.currentPage = 1;
$scope.totalItems = 160;

$scope.pageChanged = function() {
  console.log('Page changed to: ' + $scope.currentPage);
};

これが私が含めているさまざまな必要な情報源です：

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://code.angularjs.org/1.4.8/angular.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.0.3.js"></script>

最も奇妙なことは、コードを複製するplnkrを作成し、それが機能することです。あなたはここで見ることができます： http://plnkr.co/edit/4DoKnRACbKjLnMH5vGB6

これが機能しない原因になっている可能性のあるアイデアを誰かが考えることができますか？私はここで頭をかいていて、私が間違っていることは明らかなことは何も考えられません...

すべてが大いに感謝するのに役立ちます！

angularjstwitter-bootstrapangular-ui-bootstrap
11
Tom O'Brien

私は同じ問題を実行し、すべてのAngular UI Bootstrapページネーションパラメーターをオブジェクトにラップすることで、次のように解決しました。

JS

$scope.pagination = {
    currentPage: 1,
    maxSize: 21,
    totalItems: data.count
};

HTML

<uib-pagination
    total-items="pagination.totalItems" 
    ng-model="pagination.currentPage" 
    max-size="pagination.maxSize"
    boundary-link-numbers="true" 
    ng-change="pageChanged()"></uib-pagination>
25
Viktor

私も同じ問題を抱えていました。 bootstrap-tpls-0.10.0.jsがこの問題の原因であることがわかりました。それを機能させるために、bootstrap-tpls-0.11.0.jsに置き換えただけです。

以下は、機能するライブラリの組み合わせです。

<script src="http://code.angularjs.org/1.4.8/angular.js"></script>  
<script src="http://code.angularjs.org/1.4.8/angular-resource.js"></script>  
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.js"></script>
0
Barani r