CODEWITHSUNDEEP
angularjs
JohnRobertPett
JohnRobertPett

Reputation: 1183

Creating a 'More posts...' button in Angular.js

I am currently trying to make a 'show posts' button, for my Angular.js app. I am having trouble in setting the limitTo dynamically from an external script. So far I have:

<body ng-controller="FeedCtrl">
  <h1>Feeds</h1>
  <div ng-repeat="feed in (feedLoader = (feeds | limitTo:5))">
    <p>{{feed.content}}</p>
  </div>
  <button ng-click="showPosts()">Show more...</button>
</body>

The approach I have taken is this:

$scope.showMorePosts = function () {
  $scope.feedLoader = (feeds | limitTo:feedLimit);
}

...then replaced limitTo:5 with limitTo:feedLimit in the inline part of the view.

I have set up a Plunker with the basic setup so far here: http://plnkr.co/edit/OFqkGFKVUHKi2A20c4t3

Any help would be great!

Thanks,

JP

Upvotes: 1

Views: 2448

Answers (1)

Langdon
Langdon

Reputation: 20073

Seems like you were on the right track, but you just needed to define showPosts():

$scope.showMore = function() {
    $scope.feedLimit += 1;
}

Full example:

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

HTML

<div ng-repeat="feed in (feedLoader = (feeds | limitTo:feedLimit))">
  <p>{{feed.content}}</p>
</div>
<button ng-click="feedLimit = feedLimit + 1">Show more...</button>

JavaScript:

app.controller('FeedCtrl', function($scope) {
    $scope.feedLimit = 3;
    // ...
});

Upvotes: 4

Related Questions