web-dev-qa-db-fra.com

Comment puis-je dire à ui-Bootstrap quel contenu paginer?

J'utilise ui-Bootstrap et j'essaie de faire fonctionner la pagination, mais il me manque quelque chose. J'ai lu la documentation et examiné un groupe de journalistes pour essayer de comprendre comment ils spécifient le contenu à paginer, mais je n'ai pas de chance.

Voici ce que j'ai fait http://plnkr.co/edit/5mfiAcOaGw8z8VinhIQo?p=preview

<section class="main" ng-controller="contentCtrl">
  <div ng-repeat="friend in friends">
    {{friend.name}}
  </div>
  <pagination total-items="totalItems" items-per-page="itemsPerPage" ng-model="currentPage" ng-change="pageChanged()"></pagination>

  <p>
    total Items: {{totalItems}}<br />
    Items per page: {{itemsPerPage}}<br />
    Current Page: {{currentPage}}
  </p>
</section>

Manette:

angular.module('plunker', ['ui.bootstrap'])
  .controller('contentCtrl', function ($scope) {

    $scope.friends = [
      {'name':'Jack'},
      {'name':'Tim'},
      {'name':'Stuart'},
      {'name':'Richard'},
      {'name':'Tom'},
      {'name':'Frank'},
      {'name':'Ted'},
      {'name':'Michael'},
      {'name':'Albert'},
      {'name':'Tobby'},
      {'name':'Mick'},
      {'name':'Nicholas'},
      {'name':'Jesse'},
      {'name':'Lex'},
      {'name':'Robbie'},
      {'name':'Jake'},
      {'name':'Levi'},
      {'name':'Edward'},
      {'name':'Neil'},
      {'name':'Hugh'},
      {'name':'Hugo'},
      {'name':'Yanick'},
      {'name':'Matt'},
      {'name':'Andrew'},
      {'name':'Charles'},
      {'name':'Oliver'},
      {'name':'Robin'},
      {'name':'Harry'},
      {'name':'James'},
      {'name':'Kelvin'},
      {'name':'David'},
      {'name':'Paul'}
    ];

    $scope.totalItems = 64;
    $scope.itemsPerPage = 10
    $scope.currentPage = 1;

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

    $scope.pageChanged = function() {
      console.log('Page changed to: ' + $scope.currentPage);
    };

    $scope.maxSize = 5;
    $scope.bigTotalItems = 175;
    $scope.bigCurrentPage = 1;
  });
angularjstwitter-bootstrappaginationangular-ui-bootstrap
14
Daimz

Je pourrais simplement ajouter les références suivantes:

  1. bootstrap-css 
  2. angular.js 
  3. angular-ui-bootstrap

Votre corps pourrait ressembler à ceci:

<html ng-app="friends"> 
<head>
...
</head>
<body>
   <h4>Paginated Friends</h4>
   <section class="main" ng-controller="contentCtrl">
      <div ng-repeat="friend in filteredFriends">
         {{friend.name}}
      </div>
      <pagination total-items="totalItems" items-per-page="itemsPerPage" 
         ng-model="currentPage" ng-change="pageChanged()"></pagination>
      <p>
         Total items: {{totalItems}}<br />
         Items per page: {{itemsPerPage}}<br />
         Current Page: {{currentPage}}
      </p>
   </section>
</body>
</html>

Puis définissez le contrôleur suivant:

var app = angular.module('plunker', ['ngResource', 'ui.bootstrap']);

app.factory('friendsFactory', function($resource) {
  return $resource('friends.json');
});

app.controller('contentCtrl', function ($scope, friendsFactory) {
  $scope.friends = friendsFactory.query();

  $scope.itemsPerPage = 10
  $scope.currentPage = 1;

  // $scope.maxSize = 5;
  // $scope.bigTotalItems = 175;
  // $scope.bigCurrentPage = 1;

  $scope.pageCount = function () {
    return Math.ceil($scope.friends.length / $scope.itemsPerPage);
  };

  $scope.friends.$promise.then(function () {
    $scope.totalItems = $scope.friends.length;
    $scope.$watch('currentPage + itemsPerPage', function() {
      var begin = (($scope.currentPage - 1) * $scope.itemsPerPage),
        end = begin + $scope.itemsPerPage;

      $scope.filteredFriends = $scope.friends.slice(begin, end);
    });
  });
});
25
LordTribual

Vous pouvez utiliser les variables créées dans votre ng-repeat. Cela marche. Je l'utilise jusqu'à ce que je doive le changer.

ng-repeat="friend in friends.slice(((currentPage-1)*itemsPerPage), ((currentPage)*itemsPerPage)) track by $index"

Cependant, j’ai trouvé que la meilleure solution à ce problème est de créer un filtre et de le chaîner. Placez-le en dernier dans la chaîne, car vous voudrez probablement utiliser d'autres filtres avant. Voici un exemple utilisant un filtre orderby. La différence est que vous pouvez ensuite commander tout votre tableau, puis paginer et afficher uniquement la partie que vous souhaitez afficher. 

function paginateFilter() {
  return function (friends, currentPage, itemsPerPage) {
    var filteredFlowers = flowers.slice(((currentPage-1)*itemsPerPage), ((currentPage)*itemsPerPage))
    return filteredFriends;
  };
}

Et voici le code HTML. Vous devrez utiliser un filtre avec plusieurs variables. 

ng-repeat="friend in main.friends |orderBy: 'name' | paginate: main.currentPage: main.itemsPerPage">

Où main est le nom du controllerAs.

1
rotato poti

ui-bootstrap 0.10 n'utilise pas ng-model pour mettre à jour la page en cours.

utilisez page="currentPage" pour afficher la page actuelle.

utilisez on-select-page="setPage(page)" pour changer la page en cours.

Exemple est ici:

http://plnkr.co/edit/UIWIeDSKIK4bG96eoJmt?p=preview

si vous voulez utiliser ng-model. mettre à jour votre version de ui-bootstrap vers la version 0.11

1
Bob Yuan

implémentation utilisant des composants angularjs 1.5 et TypeScript

searchresults.controller.ts

import {Group as Groups, GroupSearchCriteria as GroupsSearchCriteria, GroupSearchResults as GroupsSearchResults } from "../../models/Groups";
import GroupsService from "groups/groups.service";

interface ISearchResultsController {
    groups: Groups[];
    groupsSearchCriteria: GroupsSearchCriteria;
    pageChanged(): void;
    splitGroupsPagination(): void;
  }

class SearchResultsController implements ISearchResultsController {

    groups: Groups[];
    groupsSearchCriteria: GroupsSearchCriteria;
    groupresSearchCriteria: any;
    TotalResults: any;
    CurrentPage: any;
    ResultsPerPage: any;
    pageCount: number;
    begin: number;
    end: number;
    sortedResults: Groups[];

           constructor(private groupsService: GroupsService, private groupSearchResults: GroupsSearchResults) {
        var isolatedScopeSearchResults = this;
        this.groups = isolatedScopeSearchResults.groupsService.searchCallback.SearchResults;
        this.groupresSearchCriteria = isolatedScopeSearchResults.groupsService.searchCallback.Criteria;
        this.TotalResults = 7;
        this.CurrentPage = 1;
        this.ResultsPerPage = 5;
    }

    $onInit() {
        this.splitGroupsPagination();
    }

    splitGroupsPagination() {
        this.pageCount = Math.ceil(this.TotalResults / this.ResultsPerPage);
        this.begin = ((this.CurrentPage - 1) * this.ResultsPerPage);
        this.end = this.begin + this.ResultsPerPage;
        this.sortedResults = this.groups.slice(this.begin, this.end);
    }

    pageChanged() {
        this.splitGroupsPagination();
    }
}

export default SearchResultsController;

searchresults.component.ts

    import SearchResultsController from "./searchresults.controller";

    class SearchResultsComponent implements ng.IComponentOptions {
        template = `


    <div id="groupSearchResults" class="box-response">
      <!-- start: results header with btn add-->
        <div class="box-header">
            <h2><span>Search Results: </span><span>{{$ctrl.groups.length}}</span> <span>Term: {{$ctrl.groupresSearchCriteria.SearchDescription}}</span></h2>
        </div>

        <div class="box-content">


    <table class="table table-bordered table-hover table-striped">
        <thead>
            <tr>
                <td>Name</td>
                <td>Id</td>
                <td>Consent Group</td>
                <td>Permitted Uris</td>
                <td>Actions</td>
            </tr>
        </thead>
        <tbody>
            <tr data-ng-repeat="group in $ctrl.sortedResults">
                <td>{{group.Name}}</td>
                <td>{{group.Id}}</td>
                <td>{{group.IncludeInConsentGroups}}</td>
                <td>{{group.PermittedUris}}</td>
                <td>
                   <a class="btn btn-success" href="" ui-sref="edit({editgroupId:group.Id})"><i class="fa fa-edit"></i></a>
                </td>
            </tr>
        </tbody>
    </table>

    </div>

  <uib-pagination total-items="$ctrl.TotalResults" ng-model="$ctrl.CurrentPage" items-per-page="$ctrl.ResultsPerPage" ng-change="$ctrl.pageChanged()"></uib-pagination>

    </div>


       `;

        controller = ['GroupsService',SearchResultsController];
    }

    export default SearchResultsComponent;
0
d689p