Question

我有一个着名的places数组，每个地方包含一个tour数组，其中包含20个元素20是每个着名地方下的游览数量。例如＆＃39;埃及＆＃39;在其迷人的地点包含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获得的。但是在第一个limitTo:3中添加ng-repeat并未显示第3个酒店名称，因为前3个元素已被隐藏，因为没有酒店，但索引仍然存在！

我发现了这个类似的主题，但无法帮助Using ng-repeat and limitTo to limit the number of visible items displayed

如何从过滤的酒店列表中仅显示前3个酒店名称？或者我做错了什么？

Answer 1

您需要先使用自定义过滤器然后限制。

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

Answer 2

使用过滤器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

Answer 3

我不知道我是否正确理解了您的问题，但如果您正在尝试获得前三个酒店的每次旅行，那么您应该将limitTo过滤器放在第二个NG-重复。

使用limitTo以及ng-show和ng-repeat后无法显示已过滤的项目

3 个答案: