Search code examples
javascriptangularjsloopsangularjs-ng-repeatjsfiddle

ng-repeat angularjs 1.5.11 not work

i have an angularJS v1.5.11 app, but i've got big problem when i want to do a simple ng-repeat in table like

<tbody>
 <tr ng-repeat="score in data.result"> 
    <td ng-repeat="item in score"> {{ item }} </td>
 </tr>
</tbody>

my code works fine on angularJS v1.1.1, hope you can help me. i made a JSFiddle here : https://jsfiddle.net/vpLj20w1/5/ u can change AngularJS framework version in JSFiddle to see work fine on 1.1.1, but on 1.4.8 and higher doesn't work..

best regards, Axel.

Solution

  • You need to tell angularjs that your controller exists. Try declaring a module and adding the controller to the module:

    <div ng-app="myApp">
  <div ng-controller="scoreCtrl">
  ...
  </div>
</div>

    and then add to your javascript:

    var app = angular.module("myApp", []);
app.controller("scoreCtrl", scoreCtrl);

    Now it runs better than it did, but you have a problem with ng-repeat="item in score" as angularjs needs a unique key for anything used in ng-repeat and you have duplicated items.

    Change the inner loop to:

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

    and now you should get the expected output.

    BTW, looking at the javascript console in your browser would have helped you here: initially it was complaining that it couldn't find the controller function and then when I injected it into the app it complained about the repeater.