Mischen Sie eine Tabelle mit Angular-UI-Accordion

Ich versuche zu mischen, eine Tabelle mit angular-ui - accordion-aber ich kann nicht herausfinden, einen Weg, es zu tun.
Ich bin kein Profi, schreiben Richtlinien. Ich Frage mich, ob so eine Brücke vorhanden ist. Um etwas zu erreichen wie diese :

<table class="table table-hover table-condensed" thead>
    <thead>
        <tr>
            <th>{{ data.profile.firstname }}</th>
            <th>{{ data.profile.lastname }}</th>
            <th>{{ data.profile.email }}</th>
            <th>{{ data.profile.company_name }}</th>
            <th>{{ data.profile.city }}</th>
        </tr>
    </thead>
    <tbody accordion close-others="true">
        <!-- <tr ng-repeat="client in clients" ng-click="goTo('profile/' + client.username);"> -->
        <tr ng-repeat="client in clients" accordion-group is-open="client.isOpen">
            <accordion-heading>
                <td>{{ client.firstname }}</td>
                <td>{{ client.lastname }}</td>
                <td>{{ client.email }}</td>
                <td>{{ client.company_name }}</td>
                <td>{{ client.city }}</td>
            </accordion-heading>
            Accordion Content
        </tr>
    </tbody>
</table>

Aber es funktioniert nicht 🙁 gibt es jemand, der erfolgreich etwas erreichen zu wollen ?

Dem Ergebnis werde ich suchen, ist, wenn ich auf eine Zeile in der Tabelle, wird dasselbe Verhalten von einem Akkordeon.

InformationsquelleAutor Romain | 2014-10-27

  1. 9

    In meinem Fall habe ich es ein bisschen primitiv, aber vielleicht wäre das eine gute Lösung für Sie als gut. Aussehen:

     <tbody ng-repeat="person in people | orderBy:predicate:reverse"  >
  <tr ng-click="isOpen=!isOpen">
    <td>{{person.name}}</td>
    <td>{{person.job}}</td>
    <td>{{person.age}}</td>
    <td>{{person.grade}}</td>
  </tr>
  <tr ng-if="isOpen">
  <td>Just an empty line</td>
  </tr>
  </tbody>
    Stellen Sie sicher, dass nur ein einzelnes Akkordeon offen bleibt, in einer Zeit,deklarieren Sie diese in Ihr Strg (inspiriert von Mohideen Mohammed ibn unten): $scope.erweitert = {l1: -1}; Dann können Sie so etwas tun(man kann die l2-usw. für weitere Ebenen): <tbody ng-repeat="person im Menschen | orderBy:Prädikat:reverse" > <tr ng-click="ausgebaut.l1 = ($index === erweitert werden.l1) ? -1 : $index"> <td>{{person.name}}</td> <td>{{person.job}}</td> <td>{{person.age}}</td> <td>{{person.Grad}}</td> </tr> <tr ng-if="ausgebaut.l1 === $index"> <td>Nur eine leere Zeile</td> </tr> </tbody>

    InformationsquelleAutor

  2. 4

    1) Sie können versuchen div statt table für Haupt-Akkordeon. Es funktioniert für mich.

    2) Und hier ist die accordion table Beispiel getan in JSFiddle unten, ich hoffe, es wird Euch helfen. http://jsfiddle.net/Pixic/VGgbq/

    Links zu externen Seiten ohne Erläuterungen in den stack-overflow-Antwort sind in der Regel abgeraten. Erklären Sie die Lösung hier mit den relevanten code-snippets. Link zum fiddle als ein Weg, um zu sehen alle in Aktion.

    InformationsquelleAutor Mohideen ibn Mohammed

Schreibe einen Kommentar