Question

对不起基本问题，特别是软件开发和角度方面的新手。我目前正在制作一个小应用程序，它使用api在某个邮政编码附近找到电影院。

我已经制作了一个结果页面，显示某些电影在某个电影院播放的内容，但我想限制返回的结果数量，并包括“显示更多电影＆＃39;按钮。

我在下面包含了我的html和控制器：

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;

    });

}

我可以使用limitTo来实现这一目标吗？

对不起的信息感到抱歉，这是我在这里的第一个问题。

Answer 1

请在小提琴链接中尝试以下示例 -

使用limitTo过滤器。

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

https://jsfiddle.net/m0q9ju8a/

请告诉我这是否有帮助。

Answer 2

你可以这样做：

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

和你控制器

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;

});

}

如何用ng-repeat限制结果？

2 个答案: