In my project, I am using Angular and Bootstrap to create a dynamic data grid where users can edit the data. The dataset consists of an array of objects, with each object containing a non-unique group property to categorize records.
For example:
[
{
id: 1,
group: 'A',
value: 'John'
}, {
id: 2,
group: 'A',
value: 'Jake'
}, {
id: 3,
group: 'B',
value: 'Jack'
}
]
I want Angular to generate output like this:
<div class="row group">
<div class="col-md-12">A</div>
</div>
<div class="row sample">
<div class="col-md-4">1</div>
<div class="col-md-8">John
<div>
...
I attempted to use ng-repeat, but it only allowed nesting arrays within each other. This resulted in the {{ group }} being at the top level and {{ elementOfAGroup }} as its child. However, I need the final markup to be a straightforward collection of DOM elements.
I searched for solutions online, but most were basic components (directives) specifically for creating tables.