AngularJSのページ分割

Question

私は、テーブルにページネーションを追加するために、BootstrapのPaginationディレクティブを使用しています。

これは、私が手動で$ scope.transactions（コントローラのコメントアウトされたコードを参照）に追加すると、ページネーションが完全にうまく動作するという点で奇妙です。しかし、AJAX呼び出しで$ scope.transactionsを設定しようとすると、表には何も表示されません。 AJAX呼び出しが次の値を返します。

[{"date":"2017-01-06","amount":123,"action":"Deposit","id":1},{"date":"2017-01-06","amount":200,"action":"Deposit","id":2},{"date":"2017-01-06","amount":400,"action":"Deposit","id":3}]

ビュー：

<tr ng-repeat="transaction in f "> 

    <td>{{transaction.id}}</td> 
    <td>$ {{transaction.amount}}</td> 
    <td>{{transaction.action}}</td> 
    <td>{{transaction.date}}</td> 
    </tr> 
    </table> 
    <pagination 
      ng-model="currentPage" 
      total-items="transactions.length" 
      max-size="maxSize" 
      boundary-links="true"> 
     </pagination> 

コントローラー：

var mmyApp = angular.module('myApp',['ui.bootstrap']).controller('TasksController', TasksController); 
    function TasksController($scope, $http) { 

    $scope.f = [] 
     ,$scope.currentPage = 1 
     ,$scope.numPerPage = 3 
     ,$scope.maxSize = 5; 
    $scope.transactions = []; 
    $scope.history = ""; 

    $http.get('transactions').then(function (response) { 

     $scope.transactions = response.data; 
    }, function (error) { 
     throw error; 
    }); 

    //if i use this commented out code instead of the AJAX call, the pagination works fine 
    /*$scope.makeTransactions = function() { 
      $scope.transactions = []; 
      for (i=1;i<=1000;i++) { 
       $scope.transactions.push({"id":i}); 
      } 
      }; 
      $scope.makeTransactions(); 
      */ 
    $scope.$watch('currentPage + numPerPage', function() { 
      var begin = (($scope.currentPage - 1) * $scope.numPerPage) 
      , end = begin + $scope.numPerPage; 

      $scope.f = $scope.transactions.slice(begin, end); 
      }); 


} 

Answer 1

あなたのAJAX呼び出しで$scope.transactionsを移入した後$scope.fを取り込むのを忘れていました。あなたのng-repeatでは、$scope.fに保存する必要のあるアイテムをサイクリングしていますが、空です。