Jak mogę poinformować ui-Bootstrap, jakie treści należy paginować?

Używam ui-Bootstrap i staram się, aby działała na stronach, ale wydaje mi się, że czegoś brakuje. Przeczytałem dokumentację i spojrzałem na bandę pluginów, aby spróbować ustalić, w jaki sposób określają, które treści należy paginować, ale nie mam szczęścia.Jak mogę poinformować ui-Bootstrap, jakie treści należy paginować?

Oto co mam zrobić 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>

Kontroler:

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; 
    });

Źródło

2014-05-14 Daimz

może po prostu dodać następujące nazwy:

bootstrap-css
angularjs
kątowe-ui-bootstrap

Twój Ciało może wyglądać tak:

<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>

Następnie określ następujące kontrolera:

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); 
    }); 
    }); 
});

Źródło

2014-05-14 18:14:07 LordTribual

Próbowałem tego i mogę go zaktualizować treść, ale w końcu mam więcej stron, które są rzeczywiste. Zaktualizowałem Plunkera http://plnkr.co/edit/5mfiAcOaGw8z8VinhIQo?p=preview, abyś mógł zobaczyć, o czym mówię. Spróbuj kliknąć cokolwiek na temat 6. – Daimz

To dlatego, że ustawiasz '$ scope.totalItems' na 64, zamiast: ' $ scope.totalItems = $ scope.friends.length; ' Tutaj obliczam długość twoją listę znajomych. Jeśli po prostu powiesz, że ma 64 elementy, mimo że nie dostaniesz oczywiście 7 stron od 64/10 = 6,4 -> 7 stron. Jednak twoja lista zawiera tylko 32 pozycje, więc dostaniesz kilka pustych stron. – LordTribual

Fajnie, naprawdę udało mi się to wymyślić, zabrało mi trochę czasu, po prostu musiałem przejść przez twój kod ponownie i myśleć o tym logicznie. Mam jeden ostatni problem. Teraz, gdy działam, działam, chcę wywołać moich "przyjaciół" z pliku JSON przy użyciu ngResource, mogę uzyskać elementy JSON do wyświetlenia bez paginacji lub mogę je uruchomić z Paginacją, ale bez pliku JSON (oryginalny sposób). Myślę, że problem leży w "filtersRecipes", ponieważ "$ scope.recipes" pokazuje poprawnie normalnie. Skonfigurowałem Plunkr, aby wypróbować Illustrate http://plnkr.co/edit/AD1AGCYIm1dZhbuoPhxX?p=preview – Daimz

ui-bootstrap 0,10 ng nie wykorzystuje model zaktualizować bieżącą stronę.

użyć page="currentPage", aby wyświetlić aktualną stronę.

użyć on-select-page="setPage(page)", aby zmienić bieżącą stronę.

Przykład tutaj:

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

jeśli chcesz używać NG-model. zaktualizować UI-bootstrap wersję 0,11

Źródło

2014-05-14 13:58:20

Przepraszam, że dopiero zacząłem uczyć się Angular, nie jestem pewien, czy dokładnie rozumiem, jak to działa. Widzę, że aktualizuje "Current Page: 1", nie jest to stronicowanie nazw i to jest to, co naprawdę mnie myli, jak mogę połączyć paginację tak, aby wyświetlała tylko 10 nazw, a resztę ponumerowała. – Daimz

nie działa nie zmieniło treści – brabertaser19

można używać zmiennych, które są tworzone w NG-repeat. To działa. Używam go, dopóki go nie zmienię.

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

Jednak odkryłem, że najlepszym rozwiązaniem tego problemu jest utworzenie filtru i połączenie go. Umieść go w łańcuchu, ponieważ prawdopodobnie będziesz chciał użyć innych filtrów przed nim. Oto przykład użycia filtra orderby. Różnica polega na tym, że możesz następnie uporządkować całą tablicę, a następnie dokonać paginacji i pokazać tylko część, którą chcesz pokazać.

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

A tutaj jest html. Będziesz musiał użyć filtra z wieloma zmiennymi.

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

Gdzie główna jest nazwa kontrolera.

Źródło

2016-08-18 21:50:59

"Używam go, dopóki nie będę musiał go zmienić." Po co to zmieniać? To najlepsze rozwiązanie. Idealny! Dziękuję Ci – Steven

wdrożeniowe użyciu angularjs 1,5 części i maszynopis

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;

Źródło

2016-09-30 09:51:28 d689p

Jak mogę poinformować ui-Bootstrap, jakie treści należy paginować?

Odpowiedz

Powiązane problemy