無法顯示使用limitTo以及ng-show和ng-repeat後的過濾項目

我有一個着名的places數組，每個地方包含一個帶有20個元素的tour數組20個是每個着名地點下的巡視數量。例如'埃及'包含20個吸引人的地點。但問題是一些旅遊不包含任何酒店，但一些旅遊有酒店。這是我的代碼。無法顯示使用limitTo以及ng-show和ng-repeat後的過濾項目

<div ng-repeat="tour in place.tours | limitTo:3" ng-show="tour.hotels.length != 0"> 
    <li> 
    <a ng-repeat="hName in tour.hotels"> {{hName.name}} 
    </a> 
    </li> 
</div>

在第一ng-repeat我已示出只含酒店遊使用ng-show（酒店1的數）。在第二個ng-repeat我已經顯示hotels陣列的酒店名稱。

最終，我從包含酒店的旅遊中抽取了所有酒店名稱，使用兩個ng-repeat。

一切工作正常，但現在我想只顯示酒店名單中的第3個酒店名稱，我從第二個ng-repeat獲得。但在第一ng-repeat中加入limitTo:3並未顯示第3個酒店名稱，因爲前3個元素已隱藏，因爲沒有酒店，但有個索引仍然存在！。

，我發現這個類似的話題，但它無法幫助Using ng-repeat and limitTo to limit the number of visible items displayed

我如何可以顯示從過濾的酒店列表僅一日3酒店名稱？或者我做錯了什麼？

來源

2016-07-28 Md. Nahiduzzaman Rose

不知道如果我得到你的問題，但嘗試改變'NG 「顯示」到「ng-if」，所以前3個元素不會被渲染。如果不是這種情況，請分享您的數據並澄清您要實現的目標 – nitzanerman

您需要使用過濾器https://docs.angularjs.org/api/ng/filter/filter –

使用過濾tour in tours | filter: { hotels: []} | limitTo:3

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Example - example-filter-filter-production</title> 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script> 
</head> 
<body ng-app=""> 
    <div ng-init="tours = [ 
    {name:'A', hotels : [ {name:'AA'},{name:'AB' }] , }, 
    {name:'B', hotels : [ {name:'AA'},{name:'AB' }] , }, 
    {name:'D', hotels : [ {name:'AA'}] }, 
    {name:'E', hotels : [ {name:'AA'},{name:'AB' }] , }, 
    {name:'F', hotels : [ {name:'AA'},{name:'AB' }] , }, 
    {name:'G', hotels : [ {name:'AA'},{name:'AB' }] , }, 
    {name:'NONEA',  }, 
    {name:'NONEB',  } 
    ] 
         "></div> 
    <div ng-repeat="tour in tours | filter: { hotels: []}"> 
    Tour name : {{tour.name}} {{tour.hotels.length}} <br> 
    <div ng-repeat="hotel in tour.hotels"> 
     Hotel Name : {{hotel.name}} 
     <br/> 
    </div> 
    <br> 
    </div> 
</html>

https://plnkr.co/edit/CoIdSUwVoCoY32sOnO2C?p=preview

來源

2016-07-28 13:38:25

感謝您的回答。 –

我不知道我是否正確理解您的問題，但是如果您嘗試爲每次遊覽獲得前3家酒店，那麼您應該將limitTo過濾器置於第2次重複中。

來源

2016-07-28 12:49:39 MLAlex

我試過了。不起作用。現在我每次遊覽只有一家酒店。如果我在單次旅行中有更多酒店，則第2次ng-repeat的「限制」將限制該數字。 –

您需要先使用自定義過濾器，然後再進行限制。

$scope.filterFn = function(tour) 
    { 
     // Do some tests 

     if(tour.hotels.length > 0) 
     { 
      return true; // this will be listed in the results 
     } 

     return false; // otherwise it won't be within the results 
    };

HTML

<div ng-repeat="tour in place.tours | filter:filterFn | limitTo:3">

來源

2016-07-28 13:33:29 Nitish

謝謝@nitz我現在用過濾器 –

無法顯示使用limitTo以及ng-show和ng-repeat後的過濾項目

回答

相關問題