0

I have an array of famous places, each place contains a tour array with 20 elements 20 is the number of tours under each famous places. e.g. 'Egypt' contains 20 tours in its attractive locations. But problem is some tours do not contain any hotels, but some tours have hotels. Here is my code.

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

in 1st ng-repeat i have shown only the tour containing hotel(number of hotel is 1) using ng-show . in the 2nd ng-repeat i have displayed hotel names from the hotels array.

Ultimately, i have extracted all hotel names from the tours that contain hotel using two ng-repeat.

Everything is working fine, but now i want to show only first 3 hotel names from the hotel-list which i got from 2nd ng-repeat. But adding limitTo:3 in the 1st ng-repeat is not showing 1st 3 hotel name, because 1st 3 elements are already hidden as there are no hotel, but there indexes remains ! .

i found this similar topic ,but it was unable to help Using ng-repeat and limitTo to limit the number of visible items displayed

How can I show only 1st 3 hotel name from the filtered hotel list? or What i am doing wrong?

Community
  • 1
  • 1
Md. Nahiduzzaman Rose
  • 442
  • 2
  • 9
  • 23
  • not sure if i got you're problem but try changing the `ng-show` to `ng-if` so the first 3 elements won't be rendered. If that's not the case please share your data and clarify what you are trying to achieve – nitzanerman Jul 28 '16 at 12:58
  • You need to use a filter https://docs.angularjs.org/api/ng/filter/filter – Steve Drake Jul 28 '16 at 13:14

3 Answers3

1

You need to use custom filter first and then limit.

JS

  $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">
Nitish
  • 651
  • 1
  • 7
  • 14
1

Use a 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

Steve Drake
  • 1,968
  • 2
  • 19
  • 41
0

I don't know if I'm understanding your problem correctly, but if you're trying to get the first 3 hotels for EACH tour, then you should be placing the limitTo filter in the 2nd ng-repeat.

MLAlex
  • 38
  • 5
  • I tried. It will not work. For now I have just 1 hotel in each tour. if i had more hotel in a single tour, 2nd ng-repeat's "limit" will limit that number. – Md. Nahiduzzaman Rose Jul 28 '16 at 12:52