Phân trang bằng AngularJS + Coffee

books.coffee

app = angular.module("myBookshelf", ["ngResource", "ui.router", "ui.bootstrap"])

app.config ['$httpProvider', ($httpProvider) ->
  $httpProvider.defaults.headers.common['X-CSRF-Token'] = $('meta[name=csrf-token]').attr('content')
  $httpProvider.defaults.headers.common.Accept = 'application/json'
]

app.factory "Book", ($resource) ->
  $resource("/books/:id", { id: "@id" }, {
    update: { method: "PUT" }
  })

app.directive 'arPaging', () ->
  templateUrl: "<%= asset_path 'angular/paging.tpl.html' %>"

  scope:
    currentPage: "=arCurrentPage"
    paging: "=arPaging"
    pagingChange: "=arPagingChange"

  controller: ($scope) ->

    $scope.$watch "paging", () ->
      if $scope.paging?
        $scope.pages = [1..$scope.paging.number_of_pages]

    $scope.$watch "currentPage", () ->
      console.log $scope.currentPage
      $scope.pagingChange()

    $scope.setPage = (newPage) ->
      newPage = 1 if newPage < 1
      newPage = $scope.paging.number_of_pages if newPage > $scope.paging.number_of_pages
      $scope.currentPage = newPage

app.controller "BooksController", ($scope, Book, $http, $rootScope ) ->
  $scope.getBooks = () ->
    http =
      method: "GET"
      url: "/books"
      params:
        page: $scope.currentPage

    $http(http)
      .success (response) ->
        $scope.books = response.books
        $scope.paging = response.meta

  $scope.save = () ->
    if $scope.book.id?
      Book.update($scope.book)
    else
      Book.save($scope.book)

    $scope.book = {}
    $scope.bookForm.$setPristine(true)
    $scope.getBooks()

  $scope.delete = (book) ->
    book.$delete()
    $scope.getBooks()

  $scope.edit = (book) ->
    $scope.book = Book.get( { id: book.id } )

  $scope.reset = () ->
    $scope.book = {}
    $scope.bookForm.$setPristine(true)
    $scope.getBooks()

  $scope.init = () ->
    $scope.currentPage = 2
    $scope.getBooks()

index.html

div ng-app='myBookshelf' ng-controller='BooksController' ng-init='init(); nm.editing = false'
  .row
    .col-md-8
      h2 Eddie Bookshelf
      tabset
        tab heading='All Type' ng-model='tab1'
          table.table.table-striped
            tr
              th #
              th Title
              th Author
            tr ng-repeat='book in books'
              td
                .btn.btn-default ng-click='edit(book); nm.editing=true; '
                  i.glyphicon.glyphicon-pencil
                .btn.btn-default ng-click='delete(book)'
                  i.glyphicon.glyphicon-trash
              td
                | <i ng-class="{ 'fa': true, 'fa-book': book.book_type == 'paper', 'fa-file-pdf-o': book.book_type == 'ebook'}"></i> &nbsp;
                | <strong>{{ book.title }}</strong>
              td {{ book.author }}
          div ar-paging="paging" ar-current-page="currentPage" ar-paging-change='getBooks'
        tab heading='Paper'
          br
          table.table.table-striped
            tr
              th #
              th Title
              th Author
        tab heading='Ebook'
          br
          table.table.table-striped
            tr
              th #
              th Title
              th Author

paging.html

ul.pagination
  li
    a ng-click='setPage( currentPage - 1)' «
  li ng-repeat='page in pages' ng-class="{ active: currentPage == page }"
    a ng-click='setPage(page)' {{ page }}
  li
    a ng-click='setPage ( currentPage + 1)' »