Auswahl der Gruppe in Akkordeon Liste

ich nur mit kantigem begann und ich bekam ein Codebeispiel aus codepen Accordion List Auswahl der Gruppe in Akkordeon Liste

Ich versuche, meine Daten in dem HTML-Code wie folgt zu verwenden:

<div class="group"> 
    <ion-item class="item-stable" ng-click="toggleGroup(group)" ng-class="{active: isGroupShown(group)}"></ion-item> 
    <ion-item class="item-accordion" ng-show="isGroupShown(group)"> 
    <div class="form-group"> 
     <label></label> 
     <input> 
    </div> 
    </ion-item> 
</div> 
<div class="group"> 
    <ion-item class="item-stable" ng-click="toggleGroup(group)" ng-class="{active: isGroupShown(group)}"></ion-item> 
    <ion-item class="item-accordion" ng-show="isGroupShown(group)"> 
    <div class="form-group"> 
     <label></label> 
     <input> 
    </div> 
    </ion-item>

und die JS wird wie folgt festgelegt:

angular.module('my-app',['ionic']) 

.controller('main', function($scope) { 
    $scope.groups = [{ 
    name: "Basic Info", 
    items: [1,2,3]}, 
    { 
     name: "Torso Measures", 
     items: [1,2,3]}, 
    { 
     name: "Extra measures", 
     items: [1,2,3,4,5], 
    } 
    ]; 

    $scope.toggleGroup = function(group) { 
    if ($scope.isGroupShown(group)) { 
     $scope.shownGroup = null; 
    } else { 
     $scope.shownGroup = group; 
    } 
    }; 
    $scope.isGroupShown = function(group) { 
    return $scope.shownGroup === group; 
    }; 

});

das Problem ist, dass wenn ich in 1 klicken Gruppe, alle expandieren/kollabieren. In JS/jQuery würde ich eine ID übergeben, aber ich denke, es gibt einen "eckigen Weg", um das zu tun. Könnte mir jemand helfen?

Quelle

2016-05-12 Onilol

Demo ohne ng-repeathere.

Demo mit ng-repeathere.

Warum Ihr Code kann nicht arbeiten: Da Sie nicht ng-repeat in Ihrem Markup verwendet haben, group in diesen Orten

<ion-item class="item-stable" ng-click="toggleGroup(group)" ng-class="{active: isGroupShown(group)}"></ion-item> 
    <ion-item class="item-accordion" ng-show="isGroupShown(group)">

sind beide undefined.

Sie müssen init die group Variable für toggleGroup(group), isGroupShown(group) und anderen Namen, wenn zweimal in gleichen scope.Update Ihre HTML verwendet werden soll:

<div class="group" ng-init="groupid1=1"> 
     <ion-item class="item-stable" ng-click="toggleGroup(groupid1)" ng-class="{active: isGroupShown(groupid1)}"></ion-item> 
     <ion-item class="item-accordion" ng-show="isGroupShown(groupid1)"> 
     <div class="form-group"> 
      <label></label> 
      <input> 
     </div> 
     </ion-item> 
    </div> 
    <div class="group" ng-init="groupid2=2"> 
     <ion-item class="item-stable" ng-click="toggleGroup(groupid2)" ng-class="{active: isGroupShown(groupid2)}"></ion-item> 
     <ion-item class="item-accordion" ng-show="isGroupShown(groupid2)"> 
     <div class="form-group"> 
      <label></label> 
      <input> 
     </div> 
     </ion-item> 
    </div>

jedoch von ng-repeat mit, können Sie Ihr html mit verpackt wie folgt:

<div class="group" ng-repeat="group in groups track by $index"> 
     <ion-item class="item-stable" ng-click="toggleGroup(group)" ng-class="{active: isGroupShown(group)}"></ion-item> 
     <ion-item class="item-accordion" ng-show="isGroupShown(group)"> 
     <div class="form-group"> 
      <label></label> 
      <input> 
     </div> 
     </ion-item> 
    </div>

Es sollte funktionieren.

Quelle

2016-05-12 14:17:27

Danke!Gibt es eine Möglichkeit, meine Gruppen im Controller-Bereich zu definieren? Also könnte ich die 'group in groups' verwenden – Onilol

Sie ** machen ** tatsächlich ** Gruppen im Controller-Bereich zu definieren durch diese Anweisung' $ scope.groups = [{...}, {...}, {.. .}] '. –

Wie könnte ich es dann ersetzen? Es tut uns leid. Ich bin neu darin und es gibt viele Informationen, die anstelle von Hilfe verwirren. – Onilol

Die Tatsache, dass alle Ihre Gruppen auf Click expandieren, liegt wahrscheinlich daran, dass Sie (in Ihrem Code-Snippet) zwei divs haben, die dasselbe Gruppenmodell verwenden.

Ich spreche von der Gruppe in Ihrer Toggle-Funktion gegeben:

ng-click="toggleGroup(group)"

Im Tutorial verwendet der writter eine ng-Repeat-Richtlinie seines divs

<div ng-repeat="group in groups">

diese Linie zu erzeugen, geht in Gruppen und nimm jedes Element in Gruppenmitglieder in ein neues Gruppenmodell. Dies könnte der Grund sein, warum deine Akkordeons alle expandieren (und wahrscheinlich alle denselben Inhalt haben). Könnten Sie uns ein wenig mehr Co geben

Wenn Sie Bootstrap Akkordeon verwenden möchten, kann ich Ihnen raten, zu sehen, Angular-ui, ein Angular-Modul zu ersetzen bootstrap.js und die gleichen Dinge in einem Winkel (mit Direktiven, Databinding ....).

Quelle

2016-05-12 13:47:47 FitzChill

Auswahl der Gruppe in Akkordeon Liste

Antwort

Verwandte Themen