Nested ng-repeat does not work in IE8

Question

I have a one-page application in AngularJS 1.2.28, and I'm struggling to get it working correctly in IE8.

In particular, I have a problem with nested ng-repeat used to display bigObject declared in the following MainController :

 angular.module('singlePageApp') .controller('MainController', ['$scope', function ($scope) { $scope.showLittleObjectsList = false; $scope.bigObject = { objects: [ { name: "NAME1", metadata: [ {index: 0, desc: "metadataQ"}, {index: 0, desc: "metadataF"}, {index: 1, desc: "metadataZ"}, {index: 1, desc: "metadataL"} ] }, { name: "NAME2", metadata: [ {index: 0, desc: "metadataH"}, {index: 0, desc: "metadataX"} ] }, { name: "NAME3", metadata: [ {index: 0, desc: "metadataU"}, {index: 1, desc: "metadataG"}, {index: 2, desc: "metadataS"}, ] }, { name: "NAME4", metadata: [ {index: 0, desc: "metadataK"}, {index: 1, desc: "metadataR"}, {index: 1, desc: "metadataW"}, {index: 2, desc: "metadataN"}, {index: 2, desc: "metadataC"} ] } ] }; }]); 

The main HTML snippet is something like this (note that showLittleObjectsList = false; in the controller at the beginning and is used only to display lists to the user):

 <div ng-repeat="littleObject in bigObject.objects | orderBy:'name':false"> <div> <button type="button" class="btn btn-default btn-sm" ng-click="showLittleObjectsList = !showLittleObjectsList"> <span class="glyphicon glyphicon-chevron-right" ng-hide="showLittleObjectsList"></span> <span class="glyphicon glyphicon-chevron-down" ng-show="showLittleObjectsList"></span> </button> <span>{{littleObject.name}}</span> </div> <div ng-show="showLittleObjectsList"> <div> <div ng-include="'path/to/singledata/template.html'"></div> </div> </div> </div> 

template.html for single data is something like this ( groupBy filter groupBy to angular-filter ):

 <div ng-repeat="(key, metadata) in littleObject.metadata | groupBy:'index'"> <div ng-show="$first"> <strong> Metadatum desc </strong> </div> <div ng-repeat="metadatum in metadata"> <div> {{metadatum.desc}} </div> </div> </div> 

All this code works well in Chrome, Firefox, and even IE11, giving me something like this (the first v is for exit, because showLittleObjectsList = true; ):

 v NAME1 ________________________________________ | Metadata desc: | | metadataA | | metadataF | | metadataZ | | metadataL | |_______________________________________| v NAME2 ________________________________________ | Metadata desc: | | metadataH | | metadataX | |_______________________________________| v NAME3 ________________________________________ | Metadata desc: | | metadataU | | metadataG | | metadataS | |_______________________________________| v NAME4 ________________________________________ | Metadata desc: | | metadataK | | metadataR | | metadataW | | metadataN | | metadataC | |_______________________________________| 

Unfortunately, in IE8, the innermost ng-repeat sticks to the first littleObject metadata, giving me something like this:

 v NAME1 ________________________________________ | Metadata desc: | | metadataA | | metadataF | | metadataZ | | metadataL | |_______________________________________| v NAME2 ________________________________________ | Metadata desc: | | metadataA | | metadataF | | metadataZ | | metadataL | |_______________________________________| v NAME3 ________________________________________ | Metadata desc: | | metadataA | | metadataF | | metadataZ | | metadataL | |_______________________________________| v NAME4 ________________________________________ | Metadata desc: | | metadataA | | metadataF | | metadataZ | | metadataL | |_______________________________________| 

How can I get this to work in IE8?

---

small edit

Struggling with this problem, I tried not to use ng-include for singledata/template.html , instead I brutally included this partial in the main HTML, which looks like this:

 <div ng-repeat="littleObject in bigObject.objects | orderBy:'name':false"> <div> <button type="button" class="btn btn-default btn-sm" ng-click="showLittleObjectsList = !showLittleObjectsList"> <span class="glyphicon glyphicon-chevron-right" ng-hide="showLittleObjectsList"></span> <span class="glyphicon glyphicon-chevron-down" ng-show="showLittleObjectsList"></span> </button> <span>{{littleObject.name}}</span> </div> <div ng-show="showLittleObjectsList"> <div> <div ng-repeat="(key, metadata) in littleObject.metadata | groupBy:'index'"> <div ng-show="$first"> <strong> Metadatum desc </strong> </div> <div ng-repeat="metadatum in metadata"> <div> {{metadatum.desc}} </div> </div> </div> </div> </div> </div> 

Unfortunately, this does not solve the problem.

---

EDIT

An important part of the goal is to show lists with their metadata grouped by index . I added the full controller code, and I ended up changing the metadata indices to group to make more sense.

Answer 1

I saw something very similar to mine, where I grouped the data, and then used ng-repeat over this group. Unfortunately, the only solution I found was to create my own function that returns a flattened list.

The problem (I think) is that ie-8 is simply not efficient enough to maintain repetition in area and time, using a function, it will execute only once and, therefore, reduce raw processing power.

Just to help, here is the grouping function that I created, I modified it to work with your data above, just call the function and repeat the groups instead.

  $scope.generateGroups = function(littleObject) { $scope.groups = []; var options = []; littleObject.metadata.forEach(function (item, index) { var groupIndex = $.inArray(item['index'], options); if (groupIndex >= 0) { $scope.groups[groupIndex].push(item); } else { options.push(item['index']); var test = [item]; $scope.groups.push(test); } }); $scope.apply(); } 

Answer 2

I'm definitely not sure, but I ran into a similar type of problem in one of my previous projects, where "track by" is in the fixed ng-repeat problem. Please check by adding

 (key, metadata) in littleObject.metadata | groupBy:'index' track by $index 

Hope this fixes your issue.