I have created a JSFiddle where I have two nested ng-repeats with tables, and the parent ng-repeat on tbody. If you inspect any row in the table, you will see there are six tbody elements, i.e. the parent level.
HTML
Store ID
Name
Address
City
Cost
Sales
Revenue
Employees
Employees H-sum
{{storedata.store.storeId}}
{{storedata.store.storeName}}
{{storedata.store.storeAddress}}
{{storedata.store.storeCity}}
{{storedata.data.costTotal}}
{{storedata.data.salesTotal}}
{{storedata.data.revenueTotal}}
{{storedata.data.averageEmployees}}
{{storedata.data.averageEmployeesHours}}
Date [YYYY-MM-dd]
Cost
Sales
Revenue
Employees
Employees H-sum
{{dayData.date}}
{{dayData.cost}}
{{dayData.sales}}
{{dayData.revenue}}
{{dayData.employees}}
{{dayData.employeesHoursSum}}
(
Side note:
This fills up the DOM if you have a lot of data on both levels, so I am therefore working on a directive to fetch data and replace, i.e. adding into DOM when clicking parent and removing when another is clicked or same parent again.
To get the kind of behavior you find on Prisjakt.nu, if you scroll down to the computers listed and click on the row (not the links). If you do that and inspect elements you will see that a tr is added and then removed if parent is clicked again or another.
)
加载中...