CODEWITHSUNDEEP
javascriptangularjs
pekpon
pekpon

Reputation: 769

nested ng-repeat isn't working properly

I'm trying to call a double nested ng-repeat to cycle through objects in objects, and it just doesn't work. I'm using tables (tr, td)

This is my HTML code:

<tr ng-repeat="row in rows">
  <td ng-repeat="item in row">
     {{item}}
  </td>
</tr>

And this is my data object:

$scope.rows = [["10:00", "0"],["12:00","1"]]

But the table doesn't print anything. What I'm doing wrong? Thanks!

UPDATE

The stackoverflow example works fine, sorry.

With my data original array doesn't work:

[["10:00","0","0","3","0","0","0","0"],    
["12:00","0","0","3","0","0","0","0"], 
["14:00","0","0","3","0","0","0","0"],
["16:00","0","0","3","0","0","0","0"],
["18:00","0","0","3","0","0","0","0"],
["20:00","0","0","3","0","0","0","0"],
["22:00","0","0","3","0","0","0","0"]]

I want to create something like:

enter image description here

Upvotes: 2

Views: 595

Answers (1)

Claies
Claies

Reputation: 22323

When running your code with your sample data exactly as shown, the following error is noted in the console logs:

Error: [ngRepeat:dupes] Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys. Repeater: item in row, Duplicate key: string:0, Duplicate value: 0

This can be resolved by adding a track by expression to your ng-repeat. Since you don't have a specific column in the data to use as an index, you can use the $index special property of ng-repeat.

<tr ng-repeat="row in rows">
  <td ng-repeat="item in row track by $index">
     {{item}}
  </td>
</tr>

This code will give you the expected output.

http://plnkr.co/edit/aSbaom85JsQwUfTIwKk3?p=preview

Upvotes: 2

Related Questions