Angularjs: Nested repeat in angular doesn't work

Question

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.

try using "ng-repeat", not "data-ng-repeat" or "data-np-repeat" — SYNT4X
– SYNT4X, Commented May 19, 2015 at 8:46

Eugene J. Lee · Accepted Answer · 2015-05-19 08:47:26Z

1

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>

edited May 19, 2015 at 8:47

answered May 19, 2015 at 8:46

Eugene J. Lee

5802 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Jordumus Over a year ago

ng-repeat is still wrongly spelled in the 2nd li ;-)

Eugene J. Lee Over a year ago

Dammit! haha - Thanks Jordumus

Eugene J. Lee Over a year ago

No problem @Van Le, please mark the answer as correct if everything is okay with you

Parthipan S · Accepted Answer · 2015-05-19 09:17:50Z

1

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>

answered May 19, 2015 at 9:17

Parthipan S

1809 bronze badges

Comments

Callum Linington · Accepted Answer · 2015-05-19 08:46:45Z

0

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

answered May 19, 2015 at 8:46

Callum Linington

14.4k14 gold badges80 silver badges156 bronze badges

Collectives™ on Stack Overflow

Angularjs: Nested repeat in angular doesn't work

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related