Hey there, I'm relatively new to Angular and having some trouble with pagination. No matter what I try, I can't seem to link my directive to the content properly. Should I include the pagination info in the same controller that's used for the rest of the page? My goal is to display only five objects per page. I initially copied JS code and tried converting it to TypeScript, which might be causing issues.
Let me show you my controller:
export class HomeController {
public challenges;
public challengesCompleted;
//public allCompletedChallenges;
public totalItems = 1;
public currentPage = 1;
public maxSize = 1;
public bigTotalItems = 1;
public bigCurrentPage = 1;
public setPage(pageNo) {
this.currentPage = pageNo;
};
constructor
(
private challengeService: MyApp.Services.ChallengeService,
private $location: angular.ILocationService,
$routeParams: ng.route.IRouteParamsService
) {
this.challenges = this.challengeService.listChallenges();
this.challengesCompleted = this.challengeService.list10FinishedChallenges();
this.maxSize = 5;
this.bigTotalItems = 5;
this.bigCurrentPage = 5;
//this.allCompletedChallenges = this.challengeService.listAllCompletedChallenges();
}
}
and here's the HTML snippet:
<div class="row" ng-repeat="challenge in controller.challenges | filter: globalSearch">
<div class="col-md-12">
<div class="row">
<div class="col-md-6">
<h4>
Created By: {{challenge.challenger}}
</h4>
</div>
<div class="col-md-6">
<h4>{{challenge.dateCreated | date: 'longDate'}}</h4>
</div>
</div>
<div class="row">
<div class="col-md-6">
<h4>Title: <b>{{challenge.title}}</b></h4>
</div>
<div class="col-md-6">
<h4>Bet Amount: {{challenge.amount}}</h4>
</div>
</div>
<div class="row">
<div class="col-md-12">
<h4>
Description
</h4>
{{challenge.description}}
</div>
</div>
<div class="row">
<div class="col-md-12">
<a ng-hide="challenge.challengee!=null || !account.isLoggedIn() || account.getDisplayName() == challenge.challenger" href="/acceptChallenge/{{challenge.id}}"><b>ACCEPT THIS CHALLENGE!</b></a>
<a ng-show="!account.isLoggedIn() && challenge.challengee == null" href="/login"><b>YOU MUST BE LOGGED IN TO ACCEPT THIS CHALLENGE.</b></a>
<p ng-show="challenge.challengee!=null"><b><i>Challenge has been accepted by {{challenge.challengee}} and is in progress.</i></b></p>
</div>
<div class="col-md-12 linebreak">
<br />
</div>
</div>
</div><br /><br />
</div>
<uib-pagination total-items="totalItems" ng-model="controller.currentPage" items-per-page=5 max-size="5" class="pagination-sm" boundary-link-numbers="true">
</uib-pagination>
</div>
</div>
</div>
Your assistance would be greatly appreciated. Thanks a bunch!