Angular - 遍历嵌套的 javascript 数组答案

【问题标题】：Angular - loop over nested javascript arraysAngular - 遍历嵌套的 javascript 数组
【发布时间】：2016-12-27 11:56:33
【问题描述】：

如何使用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 我最终会求助于循环数据并动态创建 html 的 javascript，但我希望以 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>

【问题讨论】：

好的，所以你可以使用嵌套的 ng-repeat...
例子？我也在研究 angular.forEach ，这是一个选项吗？
angular.foreach 与 JavaScript 原生 foreach 非常相似，它只是迭代数组，但提供了跨浏览器的兼容性
我想做的任何体面的例子？似乎 forEach 将在控制器等上......所以也许我确实想使用嵌套的 ng-repeat ？

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

【解决方案1】：

嵌套可以重复完成，但在 ng-repeats 中重复过多可能会在性能方面付出高昂的代价，因为 Angular 会为每个重复的元素创建范围。因此，应该在 js 文件中完成过滤数据直到您需要的 html 的完美抽象值。

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

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

【讨论】：

【解决方案2】：

假设你的数据在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>

【讨论】：

【解决方案3】：

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

angular.module("app", []).controller("ctrl", function($scope) {

  $scope.confirm = {
    booking: {
      flightData: [{
        Segments: [{
          FlightNumber: 1
        }, {
          FlightNumber: 2
        }]
      }, {
        Segments: [{
          FlightNumber: 3
        }, {
          FlightNumber: 4
        }]
      }]
    }
  }
  // console.log($scope.confirm);
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div class="wrapper" ng-app="app" ng-controller="ctrl">
  <div ng-repeat="x in confirm.booking.flightData">
    Data {{$index + 1}}:
    <div ng-repeat="y in x.Segments">
      <div>Flight No: {{y.FlightNumber}}</div>
    </div>
    <br/>
  </div>
</div>

如果您只想显示以下内容：

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

那么您可以使用limitTo - 请参阅下面的演示：

angular.module("app", []).controller("ctrl", function($scope) {

  $scope.confirm = {
    booking: {
      flightData: [{
        Segments: [{
          FlightNumber: 1
        }, {
          FlightNumber: 2
        }]
      }, {
        Segments: [{
          FlightNumber: 3
        }, {
          FlightNumber: 4
        }]
      }]
    }
  }
  // console.log($scope.confirm);
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div class="wrapper" ng-app="app" ng-controller="ctrl">
  <div ng-repeat="x in confirm.booking.flightData | limitTo : 1">
    Data {{$index + 1}}:
    <div ng-repeat="y in x.Segments">
      <div>Flight No: {{y.FlightNumber}}</div>
    </div>
    <br/>
  </div>
</div>

【讨论】：

什么是`Data {{$index + 1}}:`，我应该关心性能...我可以使用track by来获得更快的速度吗？
$index 为您获取ng-repeat 中的数组索引...如果您的数组中有重复元素，则需要trackBy...
@kukkuz 如果您的数组中有重复元素并且您不需要它们，则需要它们
@kukkuz - 帮助很大。谢谢你没有侮辱我，只是一个了不起的人！干杯！
最后的评论是基于我与一些人在 SO 上的经验，而不是关于这个问题和答案，只是为了清楚起见。谢谢

【解决方案4】：

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

http://codepen.io/ackzell/pen/ENBymo

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

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

嵌套 ng-repeats 会有所帮助，但也许您想先对数据进行一些处理。

【讨论】：