Unable to show filtered item after using limitTo along with ng-show and ng-repeat
Question
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. eg '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?
3 answers
solution1
1 2016-07-28 13:33:29
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">
solution2
1 ACCPTED 2016-07-28 13:38:25
Use a filter tour in tours | filter: { hotels: []} | limitTo:3 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>
solution3
0 2016-07-28 12:49:39
我不知道我是否能正确理解您的问题，但是如果您想让EACH之旅的前3家酒店，那么您应该将limitTo过滤器放置在第二个ng-repeat中。
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.