CODEWITHSUNDEEP
javascriptangularjs
Van Le
Van Le

Reputation: 47

Angularjs: Nested repeat in angular doesn't work

Following this article

But it seemed not to work on my json structure. Here is my json

$scope.trucks = [{
  id: 4,
  truckNumber: '50LD 02456',
  driverName: 'Dẻo',
  shipments: [{
    id: 1,
    routeCode: "THC-VinhHao",
    trip: 2
  }, {
    id: 2,
    routeCode: "THC-VinhHao(R)",
    trip: 3
  }, {
    id: 3,
    routeCode: "THC2-Hiệp Thành HM",
    trip: 3
  }]
}, {
  id: 5,
  truckNumber: '61C 03948',
  driverName: 'Hưng',
  shipments: [{
    id: 4,
    routeCode: "TBC-VBL HMo",
    trip: 1
  }, {
    id: 5,
    routeCode: "THC2-Hiệp Thành HM",
    trip: 4
  }]
}];
<ul>
  <li data-ng-repeat="truck in trucks">
    {{truck.truckNumber}}
    <br />
    <ul>
      <li data-np-repeat="shipment in truck.shipments">{{shipment.routeCode}}</li>
    </ul>
  </li>
</ul>

Any help are appreciated. Thanks for reading.

Upvotes: 0

Views: 63

Answers (3)

Parthipan S
Parthipan S

Reputation: 180

Change np-repeat to ng-repeat then it will work.    
<ul>
      <li data-ng-repeat="truck in trucks track by $index">
          {{truck.truckNumber}}
        <br />
        <ul>
          <li data-ng-repeat="shipment in truck.shipments track by $index">{{shipment.routeCode}}</li>
        </ul>
      </li>
    </ul>

Upvotes: 1

Eugene J. Lee
Eugene J. Lee

Reputation: 580

Please make sure you have everything correctly spelled out. ng-repeat was misspelled. 

<ul>
  <li data-ng-repeat="truck in trucks">
    {{truck.truckNumber}}
    <br/>
    <ul>
      <li data-ng-repeat="shipment in truck.shipments">{{shipment.routeCode}}</li>
    </ul>
  </li>
</ul>

Upvotes: 1

Callum Linington
Callum Linington

Reputation: 14417

<ul>
  <li data-ng-repeat="truck in trucks">
    {{truck.truckNumber}}
    <br />
    <ul>
      <li data-np-repeat="shipment in truck.shipments">{{shipment.routeCode}}</li>
    </ul>
  </li>
</ul>

There is a typo.

<li data-ng-repeat="shipment in truck.shipments">{{shipment.routeCode}}</li>

Upvotes: 0

Related Questions