CODEWITHSUNDEEP
javascriptarraysjsonangularjs
Steve
Steve

Reputation: 14912

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

I have package ordering data in a JSON object. I can do a nested loop like below and list all the orders, then the parcels in each order, then the SKUs in each parcel.

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

However, I only want a specific order's details, not all the orders. Now, if it's the first order I want. I can use this:

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

Notice the "limitTo:1" filter. But what if I want a different index, or even better, a matching order number ("ordernum")?

Upvotes: 0

Views: 264

Answers (1)

JLRishe
JLRishe

Reputation: 101690

You can use the filter filter for this (assume here that theOrder is a scope variable with the order number that you want):

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

Upvotes: 2

Related Questions