Как сделать нумерацию страниц, используя $ http

Question

Как сделать нумерацию страниц, используя $ http

0

Я пытаюсь создать разбиение на страницы, используя Angularjs в Ionic Framework. Пожалуйста, помогите мне написать код разбивки на страницы. Я получаю данные из этого json-url.

controller.js

angular.module('starter.controllers', [])

.controller('AppCtrl', function($scope, $ionicModal, $timeout) {

  // With the new view caching in Ionic, Controllers are only called
  // when they are recreated or on app start, instead of every page change.
  // To listen for when this page is active (for example, to refresh data),
  // listen for the $ionicView.enter event:
  //$scope.$on('$ionicView.enter', function(e) {
  //});

  // Form data for the login modal
  $scope.loginData = {};

  // Create the login modal that we will use later
  $ionicModal.fromTemplateUrl('templates/login.html', {
    scope: $scope
  }).then(function(modal) {
    $scope.modal = modal;
  });

  // Triggered in the login modal to close it
  $scope.closeLogin = function() {
    $scope.modal.hide();
  };

  // Open the login modal
  $scope.login = function() {
    $scope.modal.show();
  };

  // Perform the login action when the user submits the login form
  $scope.doLogin = function() {
    console.log('Doing login', $scope.loginData);

    // Simulate a login delay. Remove this and replace with your login
    // code if using a login system
    $timeout(function() {
      $scope.closeLogin();
    }, 1000);
  };
})

.controller('PlaylistsCtrl', function($scope, $http, $log) {
  $http.get('https://raw.githubusercontent.com/bantic/imdb-data-scraping/master/data/movies.json')
      .then(function(response)
      {

       $scope.data = response.data;

      });


})

.controller('PlaylistCtrl', function($scope, $stateParams) {
});

app.js

// Ionic Starter App

// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
// 'starter.controllers' is found in controllers.js
angular.module('starter', ['ionic', 'starter.controllers'])

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if (window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
      cordova.plugins.Keyboard.disableScroll(true);

    }
    if (window.StatusBar) {
      // org.apache.cordova.statusbar required
      StatusBar.styleDefault();
    }
  });
})

.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider

    .state('app', {
    url: '/app',
    abstract: true,
    templateUrl: 'templates/menu.html',
    controller: 'AppCtrl'
  })

  .state('app.search', {
    url: '/search',
    views: {
      'menuContent': {
        templateUrl: 'templates/search.html'
      }
    }
  })

  .state('app.browse', {
      url: '/browse',
      views: {
        'menuContent': {
          templateUrl: 'templates/browse.html'
        }
      }
    })
    .state('app.playlists', {
      url: '/playlists',
      views: {
        'menuContent': {
          templateUrl: 'templates/playlists.html',
          controller: 'PlaylistsCtrl'
        }
      }
    })

  .state('app.single', {
    url: '/playlists/:playlistId',
    views: {
      'menuContent': {
        templateUrl: 'templates/playlist.html',
        controller: 'PlaylistCtrl'
      }
    }
  });
  // if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise('/app/playlists');


});

playlists.html

<ion-view view-title="Playlists">
  <ion-content>
    <ion-list>
      <ion-item ng-repeat="playlist in data | firstPage:currentPage*pageSize | limitTo:pageSize" href="#/app/playlists/{{playlist.id}}">
        {{playlist.title}}
      </ion-item>


    </ion-list>
  </ion-content>
</ion-view>

<< 1/2/3/4/5 >>

lilly 04 сен. 2016, в 16:20

Источник

1

Пожалуйста, отправьте код для вашей лучшей попытки. Благодарю.
lrnzcig 04 сен. 2016, в 13:39
0

Этот вопрос, скорее всего, привлечет негативное внимание в том виде, в каком он написан в настоящее время. Пожалуйста, прочитайте справочный центр, в частности, Как спросить .
Claies 04 сен. 2016, в 13:54
1

кажется, что ответ сервера включает в себя все результаты на одной странице. разбиение на страницы используется только тогда, когда сервер разделяет данные на страницы
MoLow 04 сен. 2016, в 14:04

Показать ещё 1 комментарий

Теги:

javascript

angularjs

1 ответ

Ещё вопросы

Пожалуйста, отправьте код для вашей лучшей попытки. Благодарю.
Этот вопрос, скорее всего, привлечет негативное внимание в том виде, в каком он написан в настоящее время. Пожалуйста, прочитайте справочный центр, в частности, Как спросить .
кажется, что ответ сервера включает в себя все результаты на одной странице. разбиение на страницы используется только тогда, когда сервер разделяет данные на страницы

cnorthfield · Answer 1 · 2016-09-04T12-04-00.000Z

Вам нужно установить pageSize для общего количества возвращенных фильмов, поскольку ответ не содержит метаданных об ответе:

.controller('PlaylistsCtrl', function($scope, $http, $log) {
  $http.get('https://raw.githubusercontent.com/bantic/imdb-data-scraping/master/data/movies.json')
      .then(function(response)
      {

       // populate data with the array of movies
       $scope.data = response.data;

       // set the page size to the total number of movies
       $scope.pageSize = $scope.data.length;

      });

});