angular.jsでもっと見るを実装する方法

やりたいこと

なんらかの情報を一覧表示。たとえば最初に20件くらい表示しておいてスクロールして1番下の方にもっとみるボタンを設置。もっと見るボタンをおしたら次のページを表示。ありがちなページを作成したかったのでそれのangular.jsで実装したときのメモです。

実装

//クライアント

//controler
var App = angular.module("App",[]);
App.controller("ControllerList",function($scope, $http) {
  $scope.list = [];
  $scope.page = 1;

  //1ページ目を取得
  $scope.getList();

  //もっと見るボタン
  $scope.getMore() = function() {
    $scope.page++;
    $scope.getList();
  }

  //データ取得メソッド
  $scope.getList = function() {
      var list = MyService.getList({
        page: $scope.page
      });
      list.$promise.then(function(response) {
          if (response.result == "ok") {
              $scope.list = $scope.list.concat(response.list);
          }
      });
  };
});

//service
App.factory("MyService", function($resource) {
  return $resource(
      "/api/list:action.json",null, {
          getList: {
              params: {
                  action: "list"
              }
          },
      }
  );
});

//html
<div ng-controller="ControllerList">
  <ul>
    <li ng-repeat="(key, item) in list">
      {{item.id}}::{{item.name}}
    </li>
  </ul>
  <button ng-click="getMore()">もっと見る</button>
</div>

クライアント側はこんな感じです。サーバ側のAPIはページ番号が送られてくるのでそのページ番号の結果をid、nameを持つリストをJSON形式で返せばOKです

さいごに

ちなみに公開されているプラグインとかはつかってないですが「angular.js 無限スクロール」とかで検索するともっと見るボタンなしで簡単に実装できるモジュールがあるぽいので次回それをつかって実装してみたいと思います。

以上です