CODEWITHSUNDEEP
javascriptangularjsangularjs-ng-repeat
Julind
Julind

Reputation: 25

ng-repeat only displaying the first iterated data

I have this very weird problem. I have googled answers about this problem, but they don't seem to be a solution for it. Im ng-repeating a Object which would yield two divs (in this case), where each div has some items within li-s. But, it isnt working.

HTML Code 

<head>
  <title>Orari</title>
</head>

<body ng-controller="OrariController as cont">
  <script type="text/javascript" src="angular.min.js"></script>
  <script type="text/javascript" src="orari.js"></script>

  <div ng-repeat="orariDites in cont.OrariJaves">
    <ul ng-repeat="orari in orariDites">
      <li>{{orari}}</li>
    </ul>
  </div>
</body>

</html>

JavaScript Code (Orari.js in this case)

var app = angular.module("OrariT", []);

app.controller('OrariController', function(){
    this.OrariJaves = Ditet;
});

var Ditet ={
    Hene: ['Ekonomi','Histori', 'TIK', 'Letersi','Biologji', 'Fizike'],
    Marte: ['Letersi','Anglisht', 'Matematike Gjer.', 'Gjermanisht','Gjermanisht', 'Kimi', 'Fizike'],
};

I have a attached a Plunker which you can find here. The problem is also viewable here too.

Upvotes: 1

Views: 805

Answers (2)

BAM5
BAM5

Reputation: 341

Opening the console after running the plunker shows that it doesn't like that you have duplicate strings in the array

Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys. Repeater: orari in orariDites, Duplicate key: string:Gjermanisht, Duplicate value: Gjermanisht http://errors.angularjs.org/1.4.8/ngRepeat/dupes?p0=orari%20in%20orariDites&p1=string%3AGjermanisht&p2=Gjermanisht

If I remove the second "Gjermanisht" from the Ditet.Marte array it appears to work as one would expect.

Upvotes: 0

Pankaj Parkar
Pankaj Parkar

Reputation: 136144

Your inner ng-repeat should be using track by $index, because while iterating through the second element of array, it has Gjermanisht value which comes twice. Which produces angular ngRepeat dupes error.

HTML

<div ng-repeat="orariDites in cont.OrariJaves">
  <ul ng-repeat="orari in orariDites track by $index">
    <li>{{orari}}</li>
  </ul>
</div>

Upvotes: 1

Related Questions