Recently, I've been working on finding an elegant solution to represent hierarchical data in my application. Specifically, I have implemented a slide effect for bootstrap badges that showcase sub-categories using AngularJS.
With some guidance from the community on stackoverflow, I managed to create an example that functions well for parent and child data structures. However, I now require support for a new category type that allows elements to be both parents and children simultaneously - a necessity for browsing a directory structure.
<ul>
<li ng-repeat="category in categories"
ng-init="isChild = category.category_type == 'child'"
ng-show="category.category_show"
class="badge-slider">
<span class="badge {{ isChild ? 'badge-c' : 'badge-p' }}"
ng-click="isChild || updateResults(category)"
ng-bind="category.category_name">
</span>
</li>
</ul>
I am currently grappling with how to modify the code to accommodate the new 'parent and child' category type effectively. The existing implementation heavily relies on the boolean value 'isChild' and the ternary operator, which will not suffice for this additional category.
If anyone has any suggestions or ideas, please share them!
For reference, here is a PLNKR link demonstrating the sliding feature working for simple parent-child relationships: http://plnkr.co/edit/9CiXW1YAoPj80x6PtBW3
EDIT 1:
I also put together another PLNKR showcasing the functionality for a three-tier hierarchical relationship. While it works smoothly, it struggles to display 'parent and child' elements with the corresponding badge.... http://plnkr.co/edit/YoRI578GHE91t6torCUt