Angular ng-重复一次答案

【问题标题】：Angular ng-repeat onceAngular ng-重复一次
【发布时间】：2023-03-21 08:40:01
【问题描述】：

我有一个角度 ng-repeat 函数。它完美地重复了我列表中的所有项目，但我需要这些项目只显示一次。

HTML：

<div class="list">
    <div class="item item-stable" ng-repeat="departure in flightSource" padding="false" ng-click="custom=!custom">
        <div class="center">
            Terminal {{departure.airportResources.departureTerminal}}
            <div ng-hide="custom">hello</div>
        </div>
    </div>
</div>

JSON：如您所见，我得到了两个“TERMINAL 4” 我只想显示它是否已经重复。

airportResources:
    ObjectarrivalGate: "A9"
    departureGate: "14"
    departureTerminal: "1"

airportResources:
    ObjectarrivalGate: "B1"
    baggage: "5"
    departureGate: "44B"
    departureTerminal: "4"

airportResources:
    ObjectdepartureGate: "44F"
    departureTerminal: "4"

etc...

【问题讨论】：

您需要一个自定义过滤器或一个中间列表，您将从控制器中的出发列表创建。
所以你不想显示多个 airportResources 具有相同的departmentTerminal？
在您的 Angular JS 控制器中，使用 for 循环遍历 JSON 并将数据推送到本地数组中，并将“push”命令放在 if 语句中，该语句检查是否已经存在同名元素存在于您的本地阵列中。例如“terminal = 4” 如果本地数组中的所有数据不包含“terminal = 4”，则 push 否则跳过该项目并转到下一个。完成后，使用您的本地数组在前端执行 ng-repeat。希望这可以帮助。但是你为什么不显示同一个航站楼，航站楼相同但航班不同。
@linstantnoodles 是的，这就是我想要做的，但只在视图中穿上出发航站楼一次。所以它会显示“1 号航站楼，2 号航站楼，3 号航站楼”。不是“1号航站楼。2号航站楼，2号航站楼，3号航站楼”。
@user2190986 好的，我将尝试该解决方案。假设用户选择了 Terminal 2，一个 Gates 数组将显示所有包含 Terminal 2 的项目

标签： javascript angularjs angularjs-ng-repeat ng-repeat

【解决方案1】：

您可以使用这样的自定义过滤器：

<div ng-repeat="d in Resources | unique: 'airportResources.departureTerminal'">
    <div class="center">
        Terminal {{d.airportResources.departureTerminal}}
    </div>
</div>

另外，您不必自己编写自定义过滤器。它是名为 Angular-UI 的配套库的一部分。我已经在以下 plunker 为您实施了解决方案：

http://plnkr.co/edit/JVdgO8NYTnZAWAgQJbXa?p=preview

【讨论】：