json - 在 Angular 中难以实现分页功能

Question

我需要 Angular 应用程序中的分页帮助。

我的网址：https ://sportsbook.draftkings.com/api/odds/v1/leagues/3/offers/gamelines.json

我能够将所有数据显示到表格中。对于分页，我正在尝试使用http://jsfiddle.net/SAWsA/1754/。我能够毫无错误地运行我的代码，但我的项目中没有实现分页功能。

我应该在代码中进行哪些更改以确保分页功能正常工作？

这是我的 usertable.component.html 代码

<table class="table table-striped table-condensed table-hover">
                <thead>
                    <tr>
                      <th class="id">id&nbsp;<a ng-click="sort_by('id')"><i class="icon-sort"></i></a></th>
                        <th class="id">Name&nbsp;<a ng-click="sort_by('Name')"><i class="icon-sort"></i></a></th>
                        <th class="name">homeTeamName&nbsp;<a ng-click="sort_by('homeTeamName')"><i class="icon-sort"></i></a></th>
                        <th class="description">awayTeamName&nbsp;<a ng-click="sort_by('awayTeamName')"><i class="icon-sort"></i></a></th>
                        <th class="field3">Line&nbsp;<a ng-click="sort_by('line')"><i class="icon-sort"></i></a></th>


                    </tr>
                </thead>
                <tfoot>
                    <td colspan="6">
                        <div class="pagination pull-right">
                            <ul>
                                <li ng-class="{disabled: currentPage == 0}">
                                    <a href ng-click="prevPage()">« Prev</a>
                                </li>
                                <li ng-repeat="n in range(pagedItems.length)"
                                    ng-class="{active: n == currentPage}"
                                ng-click="setPage()">
                                    <a href ng-bind="n + 1">1</a>
                                </li>
                                <li ng-class="{disabled: currentPage == pagedItems.length - 1}">
                                    <a href ng-click="nextPage()">Next »</a>
                                </li>
                            </ul>
                        </div>
                    </td>
                </tfoot>
                <tbody>
                        <ng-container *ngFor="let data of data.events">

                    <tr ng-repeat="data in pagedItems[currentPage] | orderBy:sortingOrder:reverse">
                        <td>{{data.id }}</td>
                          <td>{{data.name }}</td>
        <td>{{data.homeTeamName }}</td>
        <td>{{data.awayTeamName}}</td>


       <td>{{data.offers[0].outcomes[0].line}} </td>

                    </tr>
                  </ng-container>
                </tbody>
            </table> 

这是我的 usertable.component.ts 代码

import { Component, OnInit } from '@angular/core';
import { UserService } from '../services/user.service';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';
import {DataSource} from '@angular/cdk/collections';
import { User } from '../models/user.model';
import { Http, Response } from '@angular/http';
import{NgxPaginationModule} from 'ngx-pagination';



@Component({
  selector: 'usertable',
  templateUrl: './usertable.component.html',
  styleUrls: ['./usertable.component.css']
})
export class UsertableComponent implements OnInit {

private apiUrl = 'https://sportsbook.draftkings.com/api/odds/v1/leagues/3/offers/gamelines.json';
  displayedColumns = ['id','name', 'homeTeamName','awayTeamName','line'];
  data: any = {};
  dataSource = this.data;

 constructor(private http: Http) {
  this.getLeague1();
  this.getData1();

 }


getData1(){
 return this.http.get(this.apiUrl)
  .map((res: Response) => res.json())
}

getLeague1() {
  this.getData1().subscribe(data => {
    console.log(data);
    this.data = data
  })
}
 ngOnInit() {
  var fessmodule = angular.module('myModule', []);
  }


fessmodule.controller('ctrlRead', function ($scope, $filter) {

    // init
    $scope.sort = {       
                sortingOrder : 'id',
                reverse : false
            };

    $scope.gap = 5;

    $scope.filteredItems = [];
    $scope.groupedItems = [];
    $scope.itemsPerPage = 5;
    $scope.pagedItems = [];
    $scope.currentPage = 0;

    var searchMatch = function (haystack, needle) {
        if (!needle) {
            return true;
        }
        return haystack.toLowerCase().indexOf(needle.toLowerCase()) !== -1;
    };

    // init the filtered items
    $scope.search = function () {
        $scope.filteredItems = $filter('filter')($scope.items, function (item) {
            for(var attr in item) {
                if (searchMatch(item[attr], $scope.query))
                    return true;
            }
            return false;
        });
        // take care of the sorting order
        if ($scope.sort.sortingOrder !== '') {
            $scope.filteredItems = $filter('orderBy')($scope.filteredItems, $scope.sort.sortingOrder, $scope.sort.reverse);
        }
        $scope.currentPage = 0;
        // now group by pages
        $scope.groupToPages();
    };


    // calculate page in place
    $scope.groupToPages = function () {
        $scope.pagedItems = [];

        for (var i = 0; i < $scope.filteredItems.length; i++) {
            if (i % $scope.itemsPerPage === 0) {
                $scope.pagedItems[Math.floor(i / $scope.itemsPerPage)] = [ $scope.filteredItems[i] ];
            } else {
                $scope.pagedItems[Math.floor(i / $scope.itemsPerPage)].push($scope.filteredItems[i]);
            }
        }
    };

    $scope.range = function (size,start, end) {
        var ret = [];        
        console.log(size,start, end);

        if (size < end) {
            end = size;
            start = size-$scope.gap;
        }
        for (var i = start; i < end; i++) {
            ret.push(i);
        }        
         console.log(ret);        
        return ret;
    };

    $scope.prevPage = function () {
        if ($scope.currentPage > 0) {
            $scope.currentPage--;
        }
    };

    $scope.nextPage = function () {
        if ($scope.currentPage < $scope.pagedItems.length - 1) {
            $scope.currentPage++;
        }
    };

    $scope.setPage = function () {
        $scope.currentPage = this.n;
    };

    // functions have been describe process the data for display
    $scope.search();



});


fessmodule.$inject = ['$scope', '$filter'];

fessmodule.directive("customSort", function() {
return {
    restrict: 'A',
    transclude: true,    
    scope: {
      order: '=',
      sort: '='
    },
    template : 
      ' <a ng-click="sort_by(order)" style="color: #555555;">'+
      '    <span ng-transclude></span>'+
      '    <i ng-class="selectedCls(order)"></i>'+
      '</a>',
    link: function(scope) {

    // change sorting order
    scope.sort_by = function(newSortingOrder) {       
        var sort = scope.sort;

        if (sort.sortingOrder == newSortingOrder){
            sort.reverse = !sort.reverse;
        }                    

        sort.sortingOrder = newSortingOrder;        
    };


    scope.selectedCls = function(column) {
        if(column == scope.sort.sortingOrder){
            return ('icon-chevron-' + ((scope.sort.reverse) ? 'down' : 'up'));
        }
        else{            
            return'icon-sort' 
        } 
    };      
  }// end link
}
});




}

标签： jsonangularpagination