Good afternoon,
I'm having an annoying issue with AngularJS (v1.3.15) inside of Drupal7. (Note: I just mentioned the CMS to be complete, but I don't believe that it's the issue.)
I'm trying to use the ng-repeat on a div, but I keep getting the Error -> Error: [ngRepeat:dupes] http://errors.angularjs.org/1.3.15/ngRepeat/dupes?p0=x in RESULTS&p1=string: ...
I've written a sample jsfiddle, that mimics my implementation in my Drupal 7 module, however it works on jsfiddle as expected, see the following link: https://jsfiddle.net/angsar/n8e312wf/
It's just not working in the module, with the same sample data. Any ideas, on how to fix this, or at least track down the real cause?
Note: I've even tried the 'track by' clause as mentioned here: https://docs.angularjs.org/error/ngRepeat/dupes
The 'track by' works in jsfiddle, but not in the D7 module. The only differences with 'track by' in the module, is that no errors are displayed on the console, it doesn't print out the rendered angular expressions, and it triples the loop output. (Eg: if 2 divs are to be created from the ng-repeat, it will instead create about 6).
Thanks.
I solved it. I had a really stupid mistake in my JavaScript file for my D7 module.
(Note: refer to the JSFiddle above to understand the variables and their data)
My error was this; $scope.DATA = $filter('json')(data);
Which assigns a 'string' instead of a 'JSON object', therefore 'ng-repeat' would pick up an array of characters when iterating, causing the duplicate error, and hence it explains why when I tried the 'track by', why I weren't able to get the expressions to work (simply because the objects didn't exist), and the tripling of the divs etc., would be because it's a string that was being evaluated character by character.
Note: The 'data' came from an AJAX callback in AngularJS.