Scenariusz

Powiedzmy, że jestem właścicielem dużej firmy, która ma wiele sklepów. W zależności od tego, jaką rolę (miejsce w organizacji) posiadam w firmie, będę miał inny dostęp do danych. Będą różne moduły i dla tego konkretnego pytania jest taki, w którym użytkownicy, którzy mają dostęp, mogą przejść dzienny koszt i sprzedaż. (Jeśli to jest legalne lub nie ... nie obchodzi, to tylko na przykład.)

Użytkownik uzyskuje w ten sposób wszystkie dane za pośrednictwem interfejsu API REST z BackEnd (aplikacja Java) ze wszystkimi danymi dla wszystkich sklepów, do których użytkownik ma dostęp. Użytkownik powinien wtedy móc filtrować dane według różnych kombinacji filtrów. Najbardziej istotne dla mojego pytania jest przedział czasu według dni.

Będą pewne wykresy pokazujące dane na różnych poziomach, a poniżej znajdzie się obszar tabel, w którym chcę tabel wielopoziomowych, stąd moje pytanie.

Zrobione do tej poryNajpierw stworzyłem akordeony, które mają sklepy na poziomie grupy akordeonowej, a następnie następny poziom danych w tabeli, w ciele akordeonu. (W tej chwili są to tylko dane zakodowane na stałe.) Problem polegał na tym, że odpowiedni nagłówek jest ciągiem znaków i po pewnej dyskusji uznaliśmy, że nie jest to dobre rozwiązanie, ponieważ nagłówek składałby się z części danych, które byłyby w tabeli oddzielne kolumny. Trudno byłoby zatem „kolektywizować” dane nagłówka, aby dopasować poziomo różne „magazyny” (między nagłówkami akordeonu) po zwinięciu (i oczywiście jeszcze bardziej chaotyczne, gdy jeden lub więcej akordeonów zostanie rozszerzonych).Akordeony zastąpiłem tabelą i ng-powtórzeniem. Udało się zapełnić pierwszy poziom tabeli zarówno danymi z graficznego interfejsu API z danymi JSON, jak i uzyskać i18next dla nagłówków.JSON

{ 
"metadata":{
    "storesInTotal":"25",
    "storesInRepresentation":"2"
},
"storedata":[
    { 
        "store" : {
            "storeId" : "1000",
            "storeName" : "Store 1",
            "storePhone" : "+46 31 1234567",
            "storeAddress": "Some street 1",
            "storeCity" : "Gothenburg"
        },
        "data" : {
            "startDate" : "2013-07-01",
            "endDate" : "2013-07-02",
            "costTotal" : "100000",
            "salesTotal" : "150000",
            "revenueTotal" : "50000",
            "averageEmployees" : "3.5",
            "averageEmployeesHours" : "26.5",
            "dayData" : [
                { 
                    "date" : "2013-07-01",
                    "cost" : "25000",
                    "sales" : "15000",
                    "revenue" : "4000",
                    "employees" : "3",
                    "employeesHoursSum" : "24"
                },
                {
                    "date" : "2013-07-02",
                    "cost" : "25000",
                    "sales" : "16000",
                    "revenue" : "5000",
                    "employees" : "4",
                    "employeesHoursSum" : "29"
                }
            ]
        }
    },
    {
        "store" : {
            "storeId" : "2000",
            "storeName" : "Store 2",
            "storePhone" : "+46 8 9876543",
            "storeAddress": "Big street 100",
            "storeCity" : "Stockholm"
        },
        "data" : {
            "startDate" : "2013-07-01",
            "endDate" : "2013-07-02",
            "costTotal" : "170000",
            "salesTotal" : "250000",
            "revenueTotal" : "80000",
            "averageEmployees" : "4.5",
            "averageEmployeesHours" : "35",
            "dayData" : [
                { 
                    "date" : "2013-07-01",
                    "cost" : "85000",
                    "sales" : "120000",
                    "revenue" : "35000",
                    "employees" : "5",
                    "employeesHoursSum" : "38"
                },
                {
                    "date" : "2013-07-02",
                    "cost" : "85000",
                    "sales" : "130000",
                    "revenue" : "45000",
                    "employees" : "4",
                    "employeesHoursSum" : "32"
                }
            ]
        }
    }
],
"_links":{
    "self":{
        "href":"/storedata/between/2013-07-01/2013-07-02"
    }
}
}

Przykład wizualny - JSFiddle

Sprawdź wartości w ramce wyników w lewym górnym rogu. Spróbuj kliknąć na przykład wiersz z Store ID 2000, a następnie z 3000, a następnie ponownie 3000, aby zobaczyć, jak zmieniają się wartości.Aktualna aktualizacja mojego JSFiddle

Poszukiwana funkcjonalność

Po kliknięciu wiersza (jak pokazano w JSFiddle) chcę, aby dyrektywa lub coś wywołane, aby przejść i pobrać dane bazowe (dayData) dla klikniętego sklepu i pokazać wszystkie dni w przedziale dat. Tzn. Poszerzając wiersz i dodając nową tabelę pod klikniętym wierszem, który również powinien używać ng-repeat, aby uzyskać wszystkie dane wyświetlane podobnie do istniejącego, ale w wierszu.

Pytanie

Mam więc już funkcjonalność, aby uzyskać indeks $, a także konkretne dane z klikniętego wiersza. Jakiego rodzaju dyrektywy lub innego rozwiązania potrzebuję dodatkowo, aby uzyskać „dane po kliknięciu wiersza” i przedstawić je w tabeli pod klikniętym wierszem?

Nie chcę tego cały czas w DOM, ponieważ może być wiele danych dayData dla każdego sklepu i wielu sklepów. (I użyje paginacji później, ale nawet nie w DOM przez cały czas.) Oznacza to, że muszę być w stanie ADD po ​​kliknięciu wiersza, a po kliknięciu tego samego lub innego REMOVE z poprzednio klikniętego.

EDYTOWAĆ

Nowa aktualizacja JSFiddle.