Nested ng-repeat funktioniert nicht in IE8

Question

Ich habe eine einzelne Seite Anwendung in AngularJS 1.2.28 und ich habe Schwierigkeiten, es funktioniert ordnungsgemäß in IE8.

Insbesondere habe ich ein Problem mit verschachtelten ng-repeat s verwendet die bigObject im folgenden MainController erklärt anzuzeigen:

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

       ] 
      } 
      ] 
     }; 
}]); 

Der Haupt HTML Brocken ist wie folgt (man beachte etwas, dass showLittleObjectsList = false; in der Steuerung am Anfang und wird nur angezeigt werden, die Listen für den Benutzer verwendet wird):

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

die template.html der einzelnen Daten ist so etwas wie dies (die groupBy Filter gehört zur 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 Code funktioniert gut in Chrome, Firefox und sogar IE11, mir so etwas wie dieses geben (die ehemalige v für caret unten ist, weil 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       | 
|_______________________________________| 

in IE8 Leider ist das innerste ng-repeat mit dem ersten littleObject ‚Metadaten kleben, mir so etwas wie dieses geben:

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

Wie kann ich das in IE8 arbeiten?

---

klein EDIT

mit diesem Problem zu kämpfen, habe ich versucht, nicht ng-include für die singledata/template.html zu verwenden, anstatt dass ich eingeschlossen brutal teilweise in dem HTML-Haupt das wie folgt aussieht dies jetzt:

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

Leider löst das das Problem nicht.

---

EDIT

Ein wichtiger Teil des Ziel ist es, die Listen mit ihren metadata von index gruppiert zu zeigen. Ich fügte einen vollen Controller-Code hinzu und schließlich änderte ich die Indizes für die Gruppierung, um mehr Sinn zu machen.

Answer 1

Ich habe etwas sehr ähnliches gesehen, das auf meiner vorkommt, wo ich Daten gruppierte und dann ng-repeat über dieser Gruppe verwendete. Leider war die einzige Lösung, die ich fand, meine eigene Funktion, die eine abgeflachte Liste zurückgibt.

Das Problem (ich denke) ist, dass ie-8 ist einfach nicht stark genug, um die Wiederholung in Umfang und Zeiten zu halten, durch die Verwendung einer Funktion wird es nur die Berechnung durchführen und damit die rohe Verarbeitungsleistung benötigt .

Nur um zu helfen, hier ist die Gruppierungsfunktion, die ich erstellt habe, ich habe es so geändert, dass es mit Ihren Daten oben arbeiten sollte, rufen Sie einfach die Funktion auf, und führen Sie die Wiederholung über Gruppen statt.

  $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

Ich bin nicht sicher, genau, aber konfrontiert ähnliche Art von Problem in einem meiner früheren Projekt, wo "Track by" in ng-Repeat behobenen Problem. Bitte überprüfen Sie durch Hinzufügen von

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

Ich hoffe, dies wird Ihr Problem beheben.