Twitter Bootstrap Użyj collapse.js na komórkach tabeli [Almost Done]

Question

Pracuję nad stroną kont zawierającą listy transakcji (kredyty i obciążenia). Chciałbym, aby użytkownik mógł kliknąć wiersz tabeli i rozwinąć pokazując więcej informacji.

Używam twitter bootstrap i spojrzał nad dokumentacją i jest to wynik mam

<table class="table table-striped" id="account-table"> 
<thead> 
    <tr> 
     <th>#</th> 
     <th>Date</th> 
     <th>Description</th> 
     <th>Credit</th> 
     <th>Debit</th> 
     <th>Balance</th> 
    </tr> 
</thead> 
<tbody> 
    <tr data-toggle="collapse" data-target="#demo1" data-parent="#account-table" class=""> 
     <td>1</td> 
     <td>05 May 2013</td> 
     <td>Credit Account</td> 
     <td class="text-success">$150.00</td> 
     <td class="text-error"></td> 
     <td class="text-success">$150.00</td> 
     <div id="demo1" class="demo out collapse">Demo1</div> 
    </tr> 

Patrz: http://jsfiddle.net/2Dj7Y/

Jedynym problemem jest to, że wyświetla „rozwijaną informacji” złe miejsce, chciałbym dodać w nowym wierszu, zamiast drukować na górze tabeli

Próbowałem również dodać nowy wiersz tabeli (który po prostu wyświetla wiersz i nie ma akcji zwijania (stosowana tylko do pierwszego rzędu)

<tr data-toggle="collapse" data-target="#demo1" data-parent="#account-table" > 
      <td>1</td> 
      <td>05 May 2013</td> 
      <td>Credit Account</td> 
      <td class="text-success">$150.00</td> 
      <td class="text-error"></td> 
      <td class="text-success">$150.00</td> 
      <tr id="demo1" class="demo out collapse"> 
        <td>1</td> 
        <td>05 May 2013</td> 
        <td>Credit Account</td> 
        <td class="text-success">$150.00</td> 
        <td class="text-error"></td> 
        <td class="text-success">$150.00</td> 
       </tr>  

     </tr> 

Zobacz http://jsfiddle.net/ypuEj/

Pozdrawiam, i dzięki za pomoc

Answer 1

nie jestem pewien, że dostał przeszłość to jeszcze, ale musiałem pracować na czymś bardzo Podobnie dzisiaj i mam twoje skrzypce działające tak, jak pytasz, w zasadzie to, co zrobiłem, zrobiłem kolejny stół pod nim, a następnie użyłem kontroli akordeonu. Próbowałem użyć tylko zwinięcia, ale nie mogłem go uruchomić i zobaczyłem przykład gdzieś na SO, który używał akordeonu.

Oto Twoja aktualizowane skrzypce: http://jsfiddle.net/whytheday/2Dj7Y/11/

Ponieważ muszę pisać kod tutaj jest to, co każdy „sekcja” składany powinien wyglądać ->

<tr data-toggle="collapse" data-target="#demo1" class="accordion-toggle"> 
    <td>1</td> 
    <td>05 May 2013</td> 
    <td>Credit Account</td> 
    <td class="text-success">$150.00</td> 
    <td class="text-error"></td> 
    <td class="text-success">$150.00</td> 
</tr> 

<tr> 
    <td colspan="6" class="hiddenRow"> 
     <div class="accordion-body collapse" id="demo1">Demo1</div> 
    </td> 
</tr> 

Answer 2

poszerzając Tony answer, a także odpowiadając Dhaval Ptl's question, aby uzyskać prawdziwy efekt akordeonu i zezwolić na rozszerzanie tylko jednego wiersza na raz, można dodać obsługę zdarzeń dla show.bs.collapse:

$('.collapse').on('show.bs.collapse', function() { 
    $('.collapse.in').collapse('hide'); 
}); 

zmodyfikowałem jego przykładem, aby to zrobić tutaj: http://jsfiddle.net/QLfMU/116/

Answer 3

Jeśli używasz NG-repeat kątowym, aby wypełnić tabelę Hackel za jQuery fragment nie będzie działać poprzez umieszczenie go w przypadku obciążenia dokument. Będziesz musiał uruchomić fragment po zakończeniu renderowania kątowego.

Aby wyzwolić zdarzenie po NG-repeat świadczył spróbować tej dyrektywy:

var app = angular.module('myapp', []) 
.directive('onFinishRender', function ($timeout) { 
return { 
    restrict: 'A', 
    link: function (scope, element, attr) { 
     if (scope.$last === true) { 
      $timeout(function() { 
       scope.$emit('ngRepeatFinished'); 
      }); 
     } 
    } 
} 
}); 

kompletny przykład w kątowa: http://jsfiddle.net/ADukg/6880/

mam dyrektywę stąd: Use AngularJS just for routing purposes