Attempting to utilize AngularJS and Bootstrap for creating a hierarchical data display has been my recent project. Thanks to the collaboration of fellow stackoverflowers, I was able to implement a smooth sliding effect using bootstrap badges to showcase categories and subcategories.
Check out this PLNKR link to see it in action: http://plnkr.co/edit/5I1pU0TZo6AjHJTbBuG9
In the provided example, we have two main categories: fruit and vegetables.
However, as I attempt to expand the number of categories, issues arise. In reality, there could be around 100 main categories that users would need to navigate through to find specific sub-categories.
My ideal scenario involves displaying the categories vertically and ensuring they interact properly when clicked:
category-1 category-26 category-51 category-76
category-2 category-27 category-52 category-77
category-3 category-28 category-53 category-78
. . . .
. . . .
. . . .
category-24 category-49 category-74 category-99
category-25 category-50 category-75 category-100
Clicking on a category like "category-3" should reveal its subcategories in the first column, with overflows evenly distributed across other columns until balance is achieved.
In addition, I'd prefer the number of columns used for displaying data to be responsive, adapting to different devices (e.g., 2 columns on phones, 3 on tablets, 4 on desktops).
A current rough version can be viewed in this unattractive PLNKR link: http://plnkr.co/edit/jeVxDKp268WlQWzhSQU8
The use of bootstrap classes like col-xs-6 and col-md-3 in the HTML grid doesn't align with the desired vertical display, stacking elements horizontally instead.
category-1 category-2 category-3 category-4
category-5 category-6 category-7 category-8
category-9 category-10 category-11 category-12
. . . .
. . . .
. . . .
category-93 category-94 category-95 category-96
category-97 category-98 category-99 category-100
Clicking on categories results in their subcategories being displayed similarly, causing confusion rather than clarity due to lack of vertical organization.
The current HTML structure used for category display is shown below:
<ul id="categoriesUnorderedList">
<li ng-repeat="category in categories"
ng-show="category.category_show"
class="badge-slider col-xs-6 col-md-3">
<span ng-click="categoryClicked(category)"
class="badge {{ getBadgeClassName(category.category_type) }}"
ng-style="getIndent(category)">
{{category.category_name}}
</span>
</li>
</ul>
Are you aware of alternative approaches or solutions that may better suit this type of data layout? Can the bootstrap grid-system be adapted for such requirements? Any assistance is greatly appreciated...