नेस्टेड एनजी-दोहराने IE8

Question

में मैं AngularJS 1.2.28 में एक ही पृष्ठ अनुप्रयोग है और मैं इसे IE8 में ठीक से काम हो रही संघर्ष कर रहा हूँ काम नहीं करता।

विशेष रूप से मैं प्रदर्शित करने के लिए bigObject निम्नलिखित MainController भीतर घोषित इस्तेमाल किया नेस्टेड ng-repeat के साथ एक समस्या है:

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

       ] 
      } 
      ] 
     }; 
}]); 

मुख्य HTML हिस्सा कुछ इस तरह है (सूचना है कि शुरुआत में नियंत्रक में showLittleObjectsList = false;

<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 कुछ इस तरह (012 है: और बस उपयोगकर्ता के लिए सूचियां) प्रदर्शित करने के लिए प्रयोग किया जाता हैफिल्टर 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> 

सभी इस कोड क्रोम, फायरफॉक्स और यहां तक ​​कि IE11 में अच्छी तरह से काम कर रहा है, मुझे कुछ इस तरह दे रही है (पूर्व v, नीचे कैरट के लिए है, क्योंकि 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       | 
|_______________________________________| 

IE8 अंतरतम ng-repeat में दुख की बात है पहले littleObject के मेटाडाटा के साथ चिपके हुए है, मुझे कुछ इस तरह दे रही है:

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

मैं IE8 में इस काम के लिए कैसे मिल सकता है?

---

छोटे संपादित

इस समस्या के साथ संघर्ष, मैं singledata/template.html के लिए ng-include का उपयोग नहीं करने की कोशिश की, बजाय मैं बेरहमी से शामिल है कि मुख्य HTML जो की तरह दिखता है में आंशिक यह अब:

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

दुर्भाग्य से यह समस्या का समाधान नहीं करता है।

---

संपादित

लक्ष्य का एक महत्वपूर्ण भाग index के आधार पर वर्गीकृत उनके metadata के साथ सूची दिखाने के लिए है। मैंने एक पूर्ण नियंत्रक कोड जोड़ा, और अंततः मैंने अधिक समझने के लिए समूह के लिए metadata अनुक्रमणिका संशोधित की।

Answer 1

मैंने अपने पर कुछ ऐसा ही देखा है, जहां मैं डेटा समूह कर रहा था, फिर उस समूह पर एनजी-दोहराव का उपयोग कर रहा था। अफसोस की बात है कि मुझे मिला एकमात्र समाधान मेरा खुद का काम करना था जो एक चपटा सूची देता है।

समस्या (मुझे लगता है) यह है कि यानी 8-केवल एक कार्य का उपयोग करके दोहराने और समय में दोहराने के लिए पर्याप्त शक्तिशाली नहीं है, यह केवल एक बार गणना करेगा और इस प्रकार कच्चे प्रसंस्करण शक्ति को कम करेगा ।

बस मदद करने के लिए, यहां मैंने समूहबद्ध कार्य किया है, मैंने इसे संशोधित किया है, इसलिए इसे ऊपर दिए गए अपने डेटा के साथ काम करना चाहिए, बस फ़ंक्शन को कॉल करें, और इसके बजाय समूहों पर दोहराना करें।

  $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

मुझे यकीन नहीं है कि मेरी पिछली परियोजना में से एक में इसी तरह की समस्या का सामना करना पड़ा जहां 'ट्रैक द्वारा' एनजी-दोहराना तय समस्या में। कृपया

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

आशा है कि यह आपकी समस्या को ठीक करेगा।