javascript - Angular - 嵌套 JavaScript 数组的循环

Question

如何使用ng-repeat循环包含许多嵌套数组数据的数据？

我的数据有很多“段”

示例:

confirm.booking.flightData[0].Segments[0].FlightNumber
confirm.booking.flightData[0].Segments[1].FlightNumber
confirm.booking.flightData[0].Segments[2].FlightNumber

我都做了ng-repeat使用 Angular 和不使用 Angular 时，我最终都会求助于 javascript 来循环数据并动态创建 html，但我希望以 ANGULAR 方式执行此操作..如何？

带有 Angular/Javascript 数组的 HTML:

<div class="container-fluid">
    <div class="row">
        <div class="col-md-4">
            <span style="font-weight: bold;">Flight</span>
        </div>
        <div class="col-md-4">
            <span style="font-weight: bold;">Departs</span>
        </div>
        <div class="col-md-4">
            <span style="font-weight: bold;">Arrives</span>
        </div>
    </div>
    <div class="row">
        <div class="col-md-4">
          {{confirm.booking.flightData[0].Segments[0].FlightNumber}}
        </div>
        <div class="col-md-4">
          ({{confirm.booking.flightData[0].Segments[0].DepartureAirport}})
        </div>
        <div class="col-md-4">
            ({{confirm.booking.flightData[0].Segments[0].ArrivalAirport}})  
        </div>
    </div>
</div>

Answer 1

嵌套可以在重复中完成，但在 ng-repeats 中重复太多可能会降低性能，因为 Angular 会为每个重复的元素创建范围。因此，过滤数据直到获得 html 所需的完美抽象值应该在 js 文件中完成。

例如:如果您只需要 html 表单中的分段，请执行此操作，或者如果您甚至需要 html 表单中的航类数据，请关注 @Rachel 的帖子

<ul data-ng-repeat="item in confirm.booking.flightData[0].Segments">
    <li>{{ item.FlightNumber}}</li>
</ul>