在使用limitTo以及ng显示和ng重复之后，无法显示筛选的项。
我有一个著名的places数组，每个地方都包含一个包含20个元素的tour数组，20个元素是每个著名地方的旅游次数。例如：“埃及”在其吸引人的地方有20次旅游。但问题是，有些旅游不包含任何酒店，但有些旅游有酒店。这是我的密码。
<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从包含酒店的旅游中提取了所有酒店名称。
一切都很好，但现在我只想显示我从第二ng-repeat得到的酒店名单中的前3家酒店名称。但是在第一个limitTo:3中添加ng-repeat并没有显示第一个3酒店的名称，因为前3个元素已经隐藏了，因为没有酒店，但是索引仍然存在！
我发现了类似的主题，但它无法帮助Using ng-repeat and limitTo to limit the number of visible items displayed
如何从过滤后的酒店列表中只显示前3家酒店的名称？或者我做错了什么？
回答 3
Stack Overflow用户
发布于 2016-07-28 13:38:25
使用过滤器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>Stack Overflow用户
发布于 2016-07-28 13:33:29
您需要先使用自定义筛选器，然后再进行限制。
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">Stack Overflow用户
发布于 2016-07-28 12:49:39
我不知道我是否正确地理解了你的问题，但是如果你想为每个旅游获得前3家酒店，那么你应该在第二个ng-重复中放置limitTo过滤器。
https://stackoverflow.com/questions/38635805
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号