AngularJsの総アイテムの計算ページネーション（ui.bootstrap）が正しく機能しない

Question

私はcontrollerAsを使用し、$scopeをモデルとして使用しないでください。
検索結果にページネーションを追加したいと思います。私はコントローラのページングオブジェクトを以下のように持っています。これは角度サービスと共有され、次にサーバーAPIと共有されます。

vm.paging = { 
     pageNumber: 1, 
     pageSize: 10, 
     totalCount: 0 
    }; 

totalCountは、サーバーによって設定され、応答から読み取られます。 HTMLで マイページネーション：

<pagination total-items="ctrl.pageCount" 
       items-per-page="ctrl.paging.pageSize" 
       ng-model="ctrl.paging.pageNumber" 
       class="pagination-sm" 
       boundary-links="true" 
       ng-change="ctrl.find()"> 
       </pagination> 

私は以下のように、コントローラにpageCountを計算する：

vm.pageCount = function() { 
     return Math.ceil(vm.paging.totalCount/vm.paging.pageSize); 
    }; 

しかし、それは動作しません。私はvm.pageCount = 1000;を設定すると動作します。問題は機能だと思われる。この問題を解決するにはどうすればよいですか？ （ボタンが無効になっており、これは、1つを、100ページを返すべきではありません！）

更新：サンプルPlunker

Answer 1

私はそれをしました！もちろん、私の同僚の指導で:)。私のplunk（script.js）のように、応答後にvm.pagingオブジェクトを初期化していなかったので、計算はデフォルト値のvm.pagingに基づいていました。 totalCountは0なので、常に除算結果は1で、1ページしかありませんでした。

vm.find = function() { 
      vm.result.length = 0;  
vm.findingPromise = myService.find(vm.filter, vm.paging); 
      vm.findingPromise 
       .then(function (response) { 
        vm.result = response.data.result; 
        // EDITED PART: 
        vm.paging = response.data.paging; 
        // 

       }, function (response) { 
        var r = response; 
        ngNotify.set('Some problems occurred!', 
         { 
          type: 'error', 
          position: 'top', 
          sticky: true 
         }); 
       }); 

をし、また、私はuib-paginationの利点を取ることができませんでしたが、私はどこでも私は前ui-bootstrap-tpls.min.jsを使用していたui-bootstrap-tpls-1.3.2.min.jsを交換したときに、それが正常に動作します：だから私は以下のようにvm.find身体を編集しました。
また、pageCountの計算機能を削除しました。 svarogに感謝しています。

Answer 2

1. あなたが得るためにすぐに呼び出される関数式（IFEE）を使用することができます

   あなたそう

   ctrl.pageCount = (function() { 
       return Math.ceil(ctrl.paging.totalItems/ctrl.paging.pageSize); 
   })(); 
   

2. ようvm.pageCountしかし、あなたは必要ありませんをpageCountと計算し、total-items（ページ番号のページ数が自動的に計算されます）に入れると、代わりにレコード配列の長さを指定する必要があります。

は、HTTPからvm.dataをテーブルデータを取得する場合、あなたはそう

 total-items="vm.data.length" 

HTML

<uib-pagination total-items="ctrl.paging.totalItems" 
      items-per-page="ctrl.paging.pageSize" 
      ng-model="ctrl.paging.pageNumber" 
      class="pagination-sm" 
      boundary-links="true" 
      ng-change="ctrl.find()"> 
      </uib-pagination> 

JS

よう total-itemsの内側に、このデータの長さを置くべきと言うことができます

ctrl.paging = { 
     pageNumber: 1, 
     pageSize: 10, 
     totalItems: response.length // this is your remote data 
    }; 

私はバージョン0.14.0以降、このplunkerあなたのための

EDIT 1

を作った私たちが始めたバージョン0.14.0ので、ディレクティブはuib-

が付けていますすべてのコンポーネントにプレフィックスを付けます。 ui-bootstrap 0.13.4以前からアップグレードする場合は、移行ガイドを確認してください。

あなたplunkは1.3.2バージョンを使用しているためので、あなたもuib-pagination（代わりのpagination）を使用する必要があります。