Angular JS嵌套的ng-repeat只有一个顶级对象

Angular JS nested ng-repeat of only one top-level object?

本文关键字：有一个 对象 ng-repeat JS 嵌套 Angular      更新时间：2023-09-26

我在 JSON 对象中有包订购数据。 我可以像下面这样做一个嵌套循环并列出所有订单，然后列出每个订单中的包裹，然后列出每个包裹中的 SKU。

<div ng-repeat="order in orders">
order {{order.ordernum}}
    <div ng-repeat="parcel in order.parcels">
    {{parcel.upid}}
      <div ng-repeat="sku in parcel.skus">
      {{sku.sku}}{{sku.commodity}}
      </div>
    </div>
</div>

但是，我只想要特定订单的详细信息，而不是所有订单。 现在，如果这是我想要的第一个订单。我可以使用这个：

<div ng-repeat="order in orders | limitTo: 1">
order {{order.ordernum}}
    <div ng-repeat="parcel in order.parcels">
    {{parcel.upid}}
      <div ng-repeat="sku in parcel.skus">
      {{sku.sku}}{{sku.commodity}}
      </div>
    </div>
</div>

请注意"limitTo：1"筛选器。 但是，如果我想要一个不同的索引，甚至更好的是，一个匹配的订单号（"ordernum"）怎么办？

您可以使用

filter过滤器（此处假设theOrder是具有所需订单号的作用域变量）：

<div ng-repeat="order in orders | filter:{ordernum: theOrder}">


function OrderController($scope) {
  $scope.orders = [{
    ordernum: 3,
    parcels: [{
      upid: 9
    }, {
      upid: 15
    }]
  }, {
    ordernum: 7,
    parcels: [{
      upid: 1
    }]
  }];
  $scope.theOrder = 3;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.20/angular.min.js"></script>
<div ng-app="" ng-controller="OrderController">
  <select ng-model="theOrder">
    <option value="{{order.ordernum}}" 
            ng-repeat="order in orders">{{order.ordernum}}</option>
  </select>
  <div ng-repeat="order in orders | filter:{ordernum: theOrder}">
    order {{order.ordernum}}
    <div ng-repeat="parcel in order.parcels">
      {{parcel.upid}}
      <div ng-repeat="sku in parcel.skus">
        {{sku.sku}}{{sku.commodity}}
      </div>
    </div>
  </div>
</div>

相关文章：