I am looking to create a dynamic list that will display values entered by users, categorized by custom categories. The challenge is that I do not know in advance which category each element will belong to. Here's an example of how I envision the list being displayed:
Category 1:
- Element 1
- Element 2
- Element 3
Category 2:
- Element 1
- Element 2
- Element 3
My Custom Category:
- Element 1
- Element 2
I attempted to use an ng-repeat along with filtering to avoid duplicate categories. The idea was to first display the category titles and then show the corresponding elements beneath each title using another ng-repeat with an ng-if statement to filter based on the category:
<div ng-repeat="x in elements | unique:'Category'">
<h2>{{x.Category}}</h2>
<div class="element" ng-repeat="y in elements" ng-if="y.Category === {{x.Category}}">
<p class="click-text">{{y.Title}}</p>
</div>
</div>
This setup is quite messy and I need assistance in finding a cleaner solution.
Here is an example JSON array of elements:
[{
"Category": "Category 1",
"Title": "Title example",
"Comments": "Example comments"
},
{
"Category": "Category 1",
"Title": "My cat is named George",
"Comments": "Example comments"
},
{
"Category": "Category 1",
"Title": "Hocus pokus",
"Comments": "Example comments"
},
{
"Category": "Category 2",
"Title": "7 projects going LIVE now",
"Comments": "Example comments"
},
{
"Category": "Category 2",
"Title": "Batman vs Superman was a good movie",
"Comments": "Example comments"
},
{
"Category": "Category 2",
"Title": "projects (more)",
"Comments": "Example comments"
},
{
"Category": "Custom Category",
"Title": "Remember, remember the fifth of november",
"Comments": "Hello there!"
},
{
"Category": "Custom Category",
"Title": "It's night, electric night",
"Comments": "General Kenobi"
}]