嵌套javascript数组上的角度循环

如何使用

ng repeat

循环包含许多嵌套数组数据的数据

我有很多“段”的数据

例如：

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

我已经用angular完成了

ng repeat

，如果没有angular，我最终会求助于javascript来循环数据并动态创建html，但我希望用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>

航班
离开
到达
{{confirm.booking.flightData[0]。段[0]。FlightNumber}
（{{confirm.booking.flightData[0].Segments[0].DepartureAirport}）
（{{confirm.booking.flightData[0].Segments[0].ArrivalAirport}）

嵌套可以在重复中完成，但在ng重复中重复太多可能会导致性能方面的损失，因为角度为每个重复的元素创建范围。因此，应该在js文件中过滤数据，直到获得html所需的完美抽象值

例如：如果你只需要html表单中的分段，或者如果你甚至需要html表单中的航班数据，请跟随@Rachel的帖子

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

{{item.FlightNumber}

假设您的数据在

flightdetails

中，那么您可以这样做：

 <div ng-repeat="a in flightdetails ">
        <div  ng-repeat="b in a.booking">
          <div  ng-repeat="c in b.flightdata">
           <div  ng-repeat="d in c.segments">
                 {{d.flightnumber}}
           </div>
         </div>
      </div>
  </div>

{{d.flightnumber}

您可以使用嵌套的ng repeat绑定数据-请参阅下面的演示：

angular.module（“app”，[]）.controller（“ctrl”，function（$scope）{
$scope.confirm={
预订：{
飞行数据：[{
部分：[{
航班号：1
}, {
航班号：2
}]
}, {
部分：[{
航班号：3
}, {
航班号：4
}]
}]
}
}
//console.log（$scope.confirm）；
});

数据{{$index+1}}：
航班号：{y.FlightNumber}


我在这里创建了一个示例：


最终看起来是这样的，但请检查笔，因为它有更多信息：

<ul>
  <li ng-repeat="flight in vm.flightData">
    <ul>
      <li ng-repeat="segment in flight.Segments">
        <em>FlightNumber</em> {{ segment.FlightNumber }}
        <br />
        <em>Departure:</em> {{ segment.DepartureAirport }}
        <br />
        <em>Arrival:</em> {{ segment.ArrivalAirport }}
      </li>
    </ul>
  </li>
</ul>





FlightNumber{{segment.FlightNumber}}


出发：{segment.DepartureAirport}


到达：{segment.ArrivalAirport}





嵌套ng重复将有所帮助，但可能您希望首先对数据进行一些处理。
好的，那么您可以使用嵌套ng重复…示例？我还研究了angular.forEach，这是一个选项吗？angular.forEach与javascript原生forEach非常相似，它只是在数组上迭代，但它提供了跨浏览器的兼容性，这是我想要做的很多不错的例子？看来forEach会在控制器上等等。。。所以，也许我确实想使用嵌套的ng repeat？什么是`数据{{$index+1}}:`我应该关注性能吗。。。我可以使用track by获得更快的速度吗？
$index
获取
ng repeat
中数组的索引<如果数组中存在重复元素，则需要code>trackBy

。@如果数组中存在重复元素，而您不需要，则需要使用kukkuzthem@kukkuz-你帮了大忙。谢谢你没有侮辱我，只是一个了不起的人！干杯最后的评论是基于我和一些人的经验，不是为了澄清这个问题和答案。谢谢