Daten Duplikat Problem mit JSON

Question

I have included the code in http://codepen.io/sajoambattu/pen/MbezNa 

Ich habe 3 divs, in denen jedes div Farbauswahl, Speicher und Anrufpläne enthält. Die Daten des Anrufplans befinden sich nach jedem Gerätedetail (nach der Tabelle).

Alle Daten sind abhängig von 3 JSONs. Die Farbauswahl und die Speicherdaten stammen von den JSON-Geräten und die Anrufpläne stammen von JSON-Callplans. Ich habe ein anderes JSON (planMapping) für die Zuordnung des Geräts und des Anrufplans. Alle JSONs, die ich in die JS-Datei aufgenommen habe.

Meine Anforderung basiert auf der Benutzerauswahl von Farbe und Speicher, entsprechende Anrufpläne sollten angezeigt werden. Jetzt wird der Inhalt angezeigt, aber das Problem, mit dem ich konfrontiert bin, ist, dass in allen drei Bereichen (Apple, Samsung und Sony) der gleiche Inhalt angezeigt wird.

Ausgabe Beispiel:

Click iPhone 6s und Reiter aus dem Abschnitt Apfel und klicken Sie auf Speicher 32 GB und dann eine beliebige Farbe klicken, jetzt iPhone 6s und Anrufpläne angezeigt. Das Problem ist das gleiche iPhone 6s plus Anrufpläne Daten wird auch in allen anderen Bereichen angezeigt.

Jede Hilfe wäre willkommen.

Answer 1

ich habe Ihren Code aktualisiert ....

http://codepen.io/anon/pen/dOpdXr 

Änderungen:

HTML:

<div class="planDetails" ng-repeat="data in x.callPlanArr"> 

und zog auch </div> von <div class="device_overview {{x.memory}}-{{x.presales_name.split(' ').join('-').replace('(','').replace(')','')}}" ng-repeat="x in v | orderBy:'memory'" ng-show="$first"> bewegt der modifizierten div zu beenden.

JS:

item.callPlanArr = []; //at line 5770        

und

item.callPlanArr.push($scope.callplanList.callplans[x]); //5784 

Answer 2

Make folgende Änderung Ihrer Anforderung zu genügen: Shift-div mit class = "callPlans" innerhalb div mit class = "device_overview"

Hier ist die Änderung: -

<div class="device_overview {{x.memory}}-{{x.presales_name.split(' ').join('-').replace('(','').replace(')','')}}" ng-repeat="x in v | orderBy:'memory'" ng-show="$first"> 
         <div class="device_detail"> 
          <p>{{x.presales_vendor}}</p> 
          <h3>{{x.presales_name}}</h3> 
          <p>{{result}}</p> 
         </div> 
         <div class="color"> 
          <div class="color-name"> 
           <p>Choose color:</p> 
           <span ng-repeat="data in x.variants" class="{{data.s_code}}-{{x.presales_name.split(' ').join('-')}}" ng-show="$first">{{data.colour}}</span> 
          </div> 
          <div class="color-code" ng-repeat="data in x.variants" ng-click="changeImg(((data.s_code+' ')+(x.presales_name)).split(' ').join('-').replace('(','').replace(')',''));showPlan(x,data.s_code); showStock(data.s_code);" style="border-color:{{data.colour_code}};background-color:{{data.colour_code}}">{{data.colour_code}}</div> 
         </div> 
         <div class="callPlans" ng-if="device_class == x.device_class"> 
          <div class="planDetails" ng-repeat="data in callPlanArr"> 
           <div class="data"> 
            <p>Data</p> 
            <h3>{{data.plan.data_allowance}}GB</h3> 
           </div> 
           <div class="minute"> 
            <p>Minutes</p> 
            <h3>{{data.plan.call_allowance}}</h3> 
           </div> 
           <div class="text"> 
            <p>Texts</p> 
            <h3>{{data.plan.text_allowance}}</h3> 
           </div> 
           <div class="upfront"> 
            <ul> 
             <li ng-show="data.upfront != ''"><p>&pound;{{data.upfront}}</p>up front</li> 
             <li><h2>&pound;{{data.plan.rental}}/mth</h2></li> 
            </ul> 
           </div> 
          </div> 
         </div> 
        </div> 

und folgende Zeile hinzufügen in $ scope.showPlan function() des Controllers

$scope.device_class = item.device_class;