Zeigen Sie Daten auf klicken Sie auf ein Elternteil Winkel

bitte bin sehr neu neu zu eckig und versuche etwas zu tun, ich weiß nicht, ob es möglich ist. Ich habe ein JSON-Daten und ich möchte die Option beim Klicken auf ein Element rendern. Was ich erreichen will, ist, Modelle eines Telefons auf Klicken des Namens und beim Klicken eines Telefonmodells alle Telefonteile zu zeigen. Aber immer wenn ich auf ein Telefon klicke, werde ich in meiner Konsole undefiniert.Zeigen Sie Daten auf klicken Sie auf ein Elternteil Winkel

meine app.js Datei

(function(){ 

var app=angular.module('repairshop',[]); 

app.controller('phoneController',function($scope){ 
this.phones = [ 
     { 
      name: 'Apple', 
      model: [{ name: 'Iphone 5'}, {name: 'Iphone 6'},{name: 'Iphone 6s'}], 
      part: [{name:'ear phones'},{name:'external speakers'},{name:'Screen Guard'},{name:'Charger'}] 
     }, 
     { 
      name: 'Samsung', 
      model: [{ name: 'S4'}, {name: 'S5'},{name: 'S6'}], 
      part: [{name:'ear phones'},{name:'external speakers'},{name:'Screen Guard'},{name:'Charger'}] 
     }, 
     { 
      name: 'Nokia', 
      model: [{ name: 'Lumia'}, {name: '3310'},{name: 'Asha'}], 
      part: [{name:'ear phones'},{name:'external speakers'},{name:'Screen Guard'},{name:'Charger'}] 
     }, 
     { 
      name: 'Blackberry', 
      model: [{ name: 'Passport'}, {name: 'Touch 10'},{name: 'Asha'}], 
      part: [{name:'ear phones'},{name:'external speakers'},{name:'Screen Guard'},{name:'Charger'}] 
     } 
    ]; 

     $scope.loadModels=function(phone) 
    { 
    var phone=phone.name; 
    console.log (phone); 
    } 
    }); 

    })();

Meine HTML-Ansicht

<div class="phones_wrapper row"> 

    <!--begin container--> 
    <div class="container"> 

     <form class="" action="#" method="post" ng-controller="phoneController as phone" > 
     <div class="row"> 
      <div class="col-md-3 phone_display center" ng-repeat="p in phone.phones"> 
      <label> 
      <input type="radio" ng-click="loadModels(phone)" ng-model="phone.name" name="phone" ng-value="{{p.name}}" /> 
      <img src="http://placehold.it/200x200"> 
      </label> 
      <p class="text text-center phone_name">{{p.name}}</p> 
      </div> 

      </div> 
     </form> 




    </div> 
    <!--begin container--> 

</div>

Quelle

2016-06-28 altoin

sollte ich verwenden denke, dass p übergeben werden muss, anstatt zu loadModels funktion von ng-klick –

Hier ist ein einfaches Beispiel plnkr, wie Sie auf der Liste der Elemente klicken, können Sie so mehr Details sehen beschreiben als Modelle und Teile.

Grundsätzlich müssen Sie Repeater und ng-click-Ereignisse hinzufügen, um den Inhalt zu erweitern. Ich bin mir ziemlich sicher, dass Sie dieses Beispiel mit Ihrem eigenen Styling und Markup beheben können.

Edit:

Eine bessere example wo Sie das Betrachten von Modellen und Teile umschalten.

<body ng-controller="MainCtrl"> 
    <ul> 
     <li ng-repeat="phone in phones" ng-click="showModels = !showModels; $event.stopPropagation()">{{phone.name}} 
     <ul ng-show="showModels"> 
      <li ng-repeat="model in phone.model" ng-click="showParts = !showParts; $event.stopPropagation()">{{model.name}} 
      <ul ng-show="showParts"> 
       <li ng-repeat="part in phone.part"> 
       {{part.name}} 
       </li> 
      </ul> 
      </li> 
     </ul> 
     </li> 
    </ul> 
    </body>

Quelle

2016-06-28 10:57:12

Vielen Dank für die PLNKR, es ist wirklich hilfreich. Aber kann ich andere Telefone beim Klick eines Elternteils verstecken? Wenn ich also auf Apple klicke, sollten Samsung, Blackberry und Nokia versteckt sein. – altoin

@Talagbe Sicher, ich werde meine Antwort mit einer Möglichkeit aktualisieren, um die Show/ausblenden zu wechseln. –

Als Sie sehr für die Hilfe, ich erstellte eine neue Seite mit dem Code, den ich gab, aber wenn ich es änderte, zeigte es nicht die Modelle. Bitte sehen Sie es hier http://plnkr.co/edit/VgSnSFC8ccMKCCUIWyCP?p=info – altoin

Ich fand es, ich änderte die loadModels Funktion

$scope.loadModels=function(phone) 
    { 
    phone.parent=phone.name; 
    console.log (phone); 
    }

und verändert auch das Telefon zu p basierend auf @Praneeth Gudumasu Empfehlung. Danke

Quelle

2016-06-28 11:04:18 altoin

es wie dieses

 <div class="col-md-3 phone_display center" ng-repeat="p in phone.phones"> 
     <label> 
     <input type="radio" ng-click="loadModels(p)" ng-model="p.name" name="phone" ng-value="{{p.name}}" /> 
     <img src="http://placehold.it/200x200"> 
     </label> 
     <p class="text text-center phone_name">{{p.name}}</p> 
     </div>

sein sollten Sie die Wiederholung Objekt innerhalb des sich wiederholenden Vorlage und nicht der Umfang Objekt (in Ihrem Fall Variable „p“ nicht „phone“)

Quelle

2016-06-28 11:11:48

Zeigen Sie Daten auf klicken Sie auf ein Elternteil Winkel

Antwort

Verwandte Themen