CODEWITHSUNDEEP
angularjsangularjs-ng-repeat
R.Gittins
R.Gittins

Reputation: 25

How to limit results with ng-repeat?

Sorry for the basic question, extremely new to software development and angular in particular. I'm currently making a small app that uses an api to find cinemas near a certain postcode.

I have made a results page that show what films are playing in a certain cinema, but I want to limit the amount of results returned and include a 'Show more films' button.

I have included my html and controller below:

HTML

<div class="main-container">
  <fountain-header></fountain-header>
  <div class="cinemas-container">
    <h2 align="center" class="cinemas-h2">Movies playing here:</h2>
    <div class="cinema2" ng-repeat="listing in $ctrl.listings">
      <h3 class="cinema-h5">{{listing.title}}</h3>
      <ul class="cinema-h4">
        <li ng-repeat="time in listing.times">{{time}}</li>
      </ul>
    </div>
    <div class="main-container">
      </main>
    </div>
    <fountain-footer></fountain-footer>
  </div>
</div>

ListingsController

function ListingsController($http, $stateParams) {
  console.log($stateParams);

  console.log($stateParams.cinemaID);

  var vm = this;

  $http
    .get('https://api.cinelist.co.uk/get/times/cinema/' + $stateParams.CinemaID +'?day=1')
    .then(function (response) {
      console.log(response);

      vm.listings = response.data.listings;

    });

}

Could I just use limitTo to achieve this?

P.S sorry for the poor information, it's my first question on here.

Upvotes: 1

Views: 2555

Answers (2)

Parikshit Bhagawati
Parikshit Bhagawati

Reputation: 162

Please try the following example in the fiddle link -

Using the limitTo filter. 

ng-repeat="d in data | limitTo: limitvar"

https://jsfiddle.net/m0q9ju8a/

let me know if this helps.

Upvotes: 3

Lotus91
Lotus91

Reputation: 1125

You can do like this:

HTML

<div class="main-container">
<fountain-header></fountain-header>
<div class="cinemas-container">
<h2 align="center" class="cinemas-h2">Movies playing here:</h2>
<div class="cinema2" ng-repeat="listing in vm.listings | limitTo: vm.limit as results">
  <h3 class="cinema-h5">{{listing.title}}</h3>
  <ul class="cinema-h4">
    <li ng-repeat="time in vm.listing.times">{{time}}</li>
  </ul>
</div>
<button ng-hide="results.length === vm.listings.length" ng-click="vm.limit = vm.limit +8">show more...</button>
<div class="main-container">
  </main>
</div>
<fountain-footer></fountain-footer>
</div>
</div>

and in youn controller

function ListingsController($http, $stateParams) {
console.log($stateParams);

console.log($stateParams.cinemaID);

var vm = this;

vm.limit = 8;

$http
.get('https://api.cinelist.co.uk/get/times/cinema/' + $stateParams.CinemaID +'?day=1')
.then(function (response) {
  console.log(response);

  vm.listings = response.data.listings;

});

}

Upvotes: 1

Related Questions