如何用ng-repeat限制結果？

對不起，基本的問題，對軟件開發和角度來說是非常新的。我目前正在製作一個小應用程序，該應用程序使用api在某個郵政編碼附近找到電影院。如何用ng-repeat限制結果？

我製作了一個結果頁面，顯示哪些電影在某個電影院播放，但我想限制返回的結果數量幷包含「顯示更多電影」按鈕。

我已經包含了我的下面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來實現嗎？

對於貧窮的信息抱歉，這是我在這裏的第一個問題。

來源

2017-03-16 R.Gittins

您可以使用此邏輯的過濾器。 https://docs.angularjs.org/api/ng/filter/filter，也可以參考這個plunker來更好地理解它，http：//embed.plnkr.co/7LZ5sP/ – dreamweiver

謝謝！所以我理解我將如何使用字符串進行過濾，但是如果我想將頁面限制爲8個結果，然後只顯示更多按鈕，則顯示8個以上，直到數組中沒有更多對象爲止？ –

你可以這樣做：

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; 

}); 

}

來源

2017-03-16 10:40:46 Lotus91

感謝您的回覆！目前，它顯示0結果。這是因爲我不再使用ng-repeat中的控制器嗎？在運行時我已經通過控制檯瀏覽過，並且沒有發現任何錯誤。對不起，對所有這一切仍然是非常新的 –

請嘗試在撥弄鏈接下面的例子 -

使用limitTo過濾器。

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

https://jsfiddle.net/m0q9ju8a/

讓我知道，如果這有助於。

來源

2017-03-16 11:45:12

是的，這是沿着我想要的線路，但從前面的答案得到它的工作。感謝您的幫助！ –

如何用ng-repeat限制結果？

回答

相關問題