Naciśnij wiersze w tabeli renderowane z ng-repeat w kanciastym

Question

Chcę wstawić dodatkowy wiersz w tabeli, gdy klient kliknie wiersz. Dane nie powinny być wstępnie pobierane, ponieważ spodziewam się, że będzie ich co najwyżej 30 wierszy, ale tam, gdzie w każdym wierszu są skojarzone dane, których pobranie nie byłoby rozsądne.

Do tej pory moim podejściem było użycie polecenia ng-repeat do iterowania mojej kolekcji i renderowania tabeli. Gdy klient naciśnie ten wiersz, klient oczekuje szczegółów dotyczących wiersza, który ma być wyświetlany w linii jako dodatkowy wiersz pod naciśniętym wierszem.

<tr ng-repeat="court in courts">    
    <td>{{court.name}}</td> 
    <td>{{court.number}}</td> 
    <td>{{court.nrOfPlayers}}</td> 
    <td> 
    <a href ng:click="toggle(court.number)">Details</a> <!-- click toggles extra row with data loaded async --> 
    </td> 
</tr> 
<!-- extra row here --> 

udało mi się pokazać szczegóły pod stołem z ng-show w hacky sposób, ale to nie jest to, co chcę.

Jak to zrobić z plikiem angular.js? Jaki jest kątowy sposób na zrobienie tego?

Oto skrzypce z przykładu głupi sądu squash http://jsfiddle.net/HByEv/

Answer 1

myślę możliwym rozwiązaniem mogłoby być http://jsfiddle.net/HByEv/2/.

Istnieje również alternatywa dla komentarza "No players" w skrzypcach, jeśli chcesz się pozbyć dodatkowego <tr ng-show="..."></tr>.

Edit:

Jak zauważył w komentarzach, w angularjs 1.2+ można teraz używać ng-repeat-start i ng-repeat-end, aby rozwiązać ten problem.

Jossef Harush warunkiem skrzypce: http://jsfiddle.net/3yamebfw/

Answer 2

również. W rzeczywistości głównym problemem związanym z Twoim projektem jest to, że chcesz wyświetlać tysiące wierszy w tej samej tabeli. To zadziała, ale może być trudne do renderowania w niektórych przeglądarkach (IE). Dla każdego wiersza będziesz miał kilka powiązań, a każde powiązanie doda obserwatorów. Zawsze należy starać się minimalizować ilość powiązań na stronie. Proponuję użyć systemu stronicowania w twojej tablicy. Pagination on a list using ng-repeat

Jeśli naprawdę chcesz robić, co chcesz, bez wstępnego renderowania wierszy, będziesz musiał edytować dom, co nie jest dobrą praktyką w kątowej, gdy można tego uniknąć. W moim przypadku umieściłbym dane gdzie indziej na stronie, w strefie statycznej. Kiedy zrobiłem coś takiego, dodałem modalny moduł do ładowania początkowego na mojej stronie i kiedy użytkownik kliknął "więcej informacji", modal został otwarty z informacją o wybranym obiekcie.

Answer 3

Jedna próbka

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

app.controller('MyController', function($scope, $rootScope, $timeout){ 

    $scope.copy = { 
     p1: ['c1 p1', 'c1 p2'], 
     p3: ['c3 p1', 'c3 p2', 'c3 p3', 'c3 p4', 'c3 p5'] 
    } 

    $scope.courts = [ 
     { 
      "number": 1, 
      "name": "the best court", 
      "nrOfPlayers": 2 
     }, { 
      "number": 2, 
      "name": "the bad court", 
      "nrOfPlayers": 0 
     }, { 
      "number": 3, 
      "name": "the other court", 
      "nrOfPlayers": 5 
     } 
    ]; 

    $scope.loadPlayers = function(court){ 
     //Implement your logic here 
     //Probably using ajax 
     $timeout(function(){ 
      $scope.players = $scope.copy['p' + court.number] || []; 
     }, Math.random() * 2000); 
    } 

    $scope.shouDetails = function(court){ 
     if(court.nrOfPlayers) { 
      delete $scope.players; 
      $scope.loadPlayers(court); 
     } else { 
      $scope.players = []; 
     } 
    } 

}) 

Demo: Fiddle