nested ng-repeat non funziona in IE8

Question

Ho un'applicazione a pagina singola in AngularJS 1.2.28 e sto faticando a farlo funzionare correttamente in IE8.

In particolare ho un problema con nidificati ng-repeat s utilizzati per visualizzare la bigObject dichiarati entro il seguente 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"} 

       ] 
      } 
      ] 
     }; 
}]); 

Il principale blocco HTML è qualcosa di simile (si noti che showLittleObjectsList = false; nel controller all'inizio e viene utilizzato solo per visualizzare le liste per l'utente):

<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> 

la template.html del singolo di dati è qualcosa di simile (la groupBy filtro appartiene a 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> 

Tutto questo codice sta lavorando bene in Chrome, Firefox e anche IE11, che mi dà qualcosa di simile (l'ex v è per segno di omissione verso il basso, perché 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       | 
|_______________________________________| 

Purtroppo in IE8 più interno ng-repeat è attaccare con la prima metadati littleObject s', che mi dà qualcosa di simile:

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       | 
|_______________________________________| 

Come posso farlo funzionare in IE8?

---

piccola EDIT

Lottando con questo problema, ho cercato di non utilizzare ng-include per il singledata/template.html, invece ho brutalmente incluso che parziale nel HTML principale che si presenta come questo ora:

<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> 

Sfortunatamente questo non risolve il problema.

---

EDIT

Una parte importante l'obiettivo è quello di mostrare le liste con il loro metadata raggruppati per index. Ho aggiunto un codice controller completo e alla fine ho modificato gli indici metadata per il raggruppamento per avere più senso.

Answer 1

Ho visto qualcosa di molto simile sul mio, dove stavo raggruppando i dati, quindi usando ng-repeat su quel gruppo. Purtroppo l'unica soluzione che ho trovato è stata quella di creare una mia funzione che restituisca una lista appiattita.

Il problema (penso) è che ie-8 non è abbastanza potente da mantenere la ripetizione in ambito e timeout, utilizzando una funzione eseguirà il calcolo solo una volta e quindi ridurrà la potenza di elaborazione grezza necessaria .

Solo per aiutare, qui è la funzione di raggruppamento che ho creato, l'ho modificata in modo che dovrebbe funzionare con i dati di cui sopra, semplicemente chiamare la funzione, e fare la ripetizione sui gruppi, invece.

  $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

Non sono sicuro, ma ho affrontato un tipo simile di problema in uno dei miei progetti precedenti in cui "segui" nel problema risolto con ng-repeat. Si prega di verificare aggiungendo

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

Spero che questo risolva il problema.