Многоуровневые таблицы (внутри другого при нажатии)

сценарий

Допустим, я являюсь владельцем крупной компании, у которой много магазинов. В зависимости от того, какую роль (место в организации) у меня есть в компании, у меня будет другой доступ к данным. Там будут разные модули, и для этого конкретного вопроса есть тот, где пользователи, имеющие доступ, могут проходить через ежедневную стоимость и продажи. (Если это законно или нет … все равно, это просто пример).

Таким образом, пользователь получает все данные через REST API из BackEnd (приложение Java) со всеми данными для всех магазинов, к которым у пользователя есть доступ. Затем пользователь должен иметь возможность фильтровать данные с помощью различных комбинаций фильтров. Наиболее актуальным для моего вопроса является интервал дат по дням.

Там будут некоторые диаграммы, показывающие данные на разных уровнях, и ниже будет область таблицы, где я хочу многоуровневые таблицы, следовательно, мой вопрос.

• Почему свойство «replace» устарело в директивах AngularJS?
• Угловая динамическая проверка ng-шаблонов
• AngularJS - Директивы против controllerов
• Предварительный просмотр изображения перед загрузкой Angularjs
• Угловая директива, как добавить атрибут к элементу?

Сделано до сих пор

1. Сначала я создал аккордеоны, на которых хранятся уровни аккордеонной группы, а затем следующий уровень данных в таблице в аккордеонном теле. (Только жестко закодированные данные на данный момент.) Проблема заключалась в том, что соответствующий заголовок представляет собой строку, и после некоторого обсуждения мы почувствовали, что это не было хорошим решением, поскольку заголовок состоял бы из частей данных, которые в таблице были бы отдельные столбцы. Поэтому было бы сложно «коллизировать» данные заголовка, чтобы согласовать горизонтальные «магазины» (между заголовками аккордеона) при свертывании (и, конечно, еще более беспорядочно, когда расширяется один или несколько аккордеона).
2. Я заменил аккордеоны таблицей и ng-repeat. Успешно заполнили первый уровень таблицы как данными из переносного API с данными JSON, так и получили i18next для заголовков.

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" } } } 

Визуальный пример – JSFiddle

Проверьте значения в рамке результата, в верхнем левом углу. Попробуйте щелкнуть, например, строку с Store ID 2000, затем с 3000 и затем 3000 снова, чтобы увидеть, как изменяются значения. Текущее обновление моего JSFiddle

Требуемая функциональность

Когда щелкнет строка (как показано в JSFiddle), мне нужна директива или что-то срабатывающее, чтобы пойти и получить базовые данные (dayData) для щелчка магазина и показать все дни в интервале дат. Т.е. расширение строки и включение новой таблицы под нажатой строкой, которая также должна использовать ng-repeat, чтобы все отображаемые данные были похожими на существующие, но встроенные.

Вопрос

Таким образом, у меня уже есть функциональность, чтобы получить индекс $ index, а также конкретные данные из щелкнутой строки. Какую директиву или любое другое решение мне нужно дополнительно, чтобы получить «данные при щелчке по строке» и представленные в таблице под нажатой строкой?

Я не хочу этого в DOM все время, так как может быть много dayData для каждого магазина и много магазинов. (И будет использовать разбивку на страницы позже, но даже в этом случае, а не в DOM все время.) Это означает, что я должен иметь возможность ДОБАВИТЬ, когда вы нажимаете на строку, и при нажатии той же или другой УДАЛИТЬ из ранее щелкнутого.

РЕДАКТИРОВАТЬ

Новый обновленный JSFiddle .

      {{person.name}} {{person.gender}}   {{person.details}}