Table und Collapse kombiniert

[Hannes Weninger]

Hallo,

ich hab noch eine komische Anforderung in HTML. Ich möchte eine Table haben und wenn man eine Zeile anklickt, dann sollte sich die Zeile nach unten vergrößern und ein text angezeigt werden. Das hab ich mal gemacht, ich weiß aber nicht, wie ich den Text unter die jeweilige Zeile bekomm. Wär dankbar für jeden Hinweis! Danke! HAnnes

<tbody>
	<tr ng-repeat="dashboardMessageUserConnection in vm.dashboardMessageUserConnections">
	   <th scope="row">{{$index + 1}}</th>
	   <td>{{dashboardMessageUserConnection.name}}</td>
	    <td>{{dashboardMessageUserConnection.title}}</td>
            <td>{{dashboardMessageUserConnection.time}}</td>
	    <td><span class="glyphicon glyphicon-triangle-bottom"></span></td>
	    <td><input type="checkbox"></td>
        </tr>
						
	<td colspan="6">
	    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
	        <div class="panel-body">
	          text
	        </div>
	    </div>
	</td>
</tbody>

[dedlfix]

Tach!

Ich möchte eine Table haben und wenn man eine Zeile anklickt, dann sollte sich die Zeile nach unten vergrößern und ein text angezeigt werden.

Wenn der Text über die gesamte Breite gehen soll, dann brauchst du eine weitere Zeile. Ein td mit colspan ist nicht ausreichend.

Diese zweite Zeile muss auch mit ins ng-repeat rein. ng-repeat ist zwar nur eine Attribut-Direktive und kann nicht selbst als Container verwendet werden, aber man kann es in ng-repeat-start und ng-repeat-end aufteilen.

Eine weitere Möglichkeit ist, mehrere tbody-Elemente zu erstellen und das ng-repeat darein zu hängen. Das kommt aber drauf an, was man vorhat. Für jede Zeile einzeln würde ich das nicht machen, aber wenn sich von der Aufgabenstellung her Gruppen bilden lassen, dann schon eher.

Noch ein Hinweis: Wenn du Bootstrap-Elemente aus dem Abschnitt Javascript (zum Beispiel Modal, Dropdown, Collapse) in einem AngularJS-Projekt verwenden möchtest, ist es günstig, AngularStrap zu verwenden. (Die Bootstrap-Javascript-Datei darf dann nicht mehr eingebunden werden, sonst gibts Probleme.) Alternativ gibt es auch noch AngularUI, aber das hat sich irgendwann nicht mehr weiterentwickelt. (Ob das mittlerweile wieder lebt, weiß ich nicht.)

dedlfix.