I'm grappling with creating valid tabular markup using AngularJS and struggling to find a solution. While I've come across similar inquiries, none seem to cater specifically to my requirements.
My race result data is organized in the following structure:
{
"date": "1900-01-01",
"venue": "Venue",
"results": {
"10k": {
"freestyle": {
"male": [
"...a bunch of individual racer results"
],
"female": [
"...a bunch of individual racer results"
]
},
"classical": {
"male": [
"...a bunch of individual racer results"
],
"female": [
"...a bunch of individual racer results"
]
}
},
"5k": {
"freestyle": {
"male": [
"...a bunch of individual racer results"
],
"female": [
"...a bunch of individual racer results"
]
},
"classical": {
"male": [
"...a bunch of individual racer results"
],
"female": [
"...a bunch of individual racer results"
]
}
}
}
}
Essentially, it's structured as: distance, style, gender, individual racer.
I've managed to render these results into separate tables, but the resulting markup seems overly complicated. The issue I encounter now is the need for an index at the top. Initially, simple anchor links to the H3 IDs in each table sufficed. But now I wish to incorporate export links alongside the on-page table link, presented within a table. I'm unsure of the approach to achieve this. To align every row in the same table requires multiple ng-repeat iterations on essentially "dummy" elements, and I'm uncertain if I can accomplish this while generating valid markup inside a table.
My ideal approach would be...
<tr ng-repeat="(dist, (style, (gender, finishers) in genders) in styles) in race.results">
<td><a href="#{{dist}}_{{style}}_{{gender}}_results">{{dist}} {{style}} {{gender}}</a></tr>
<td><a href="#" class="download">CSV</a></td>
</tr>
Since AngularJS mandates attaching all logic to DOM elements, it involves generating excess markup. I stumbled upon a mention of creating a "directive," which seems unfamiliar to me. I'm open to delving into the intricacies of AngularJS, but this scenario should be more straightforward. In a templating system like Twig, this task would be effortless, but I fear I'll have to navigate numerous obstacles to accomplish it with AngularJS.
Is there a simple way to achieve this without overwhelming my controller with all the logic? While I'll explore the directive approach if necessary, I perceive it as a major drawback of AngularJS that could impact my interest in its further exploration.