Guide to inserting a glyphicon within a bootstrap badge

I've been working on a unique way to display hierarchical data using bootstrap badges and AngularJS. My goal is to create a user-friendly experience where people can easily navigate through categories.

There are 3 main types of categories:

parent: This is the top-level category

parent and child: A child category with its own subcategories

child: A bottom-level child category with no sub-categories

Thanks to the amazing support from the Stackoverflow community, I now have a visually appealing version up and running. You can check it out here:

http://plnkr.co/edit/5I1pU0TZo6AjHJTbBuG9

Below is the relevant HTML code for displaying these categories:

<ul id="categoriesUnorderedList">
  <li ng-repeat="category in categories"
      ng-show="category.category_show"
      class="badge-slider">
    <span ng-click="categoryClicked(category)"
          class="badge {{ getBadgeClassName(category.category_type) }}"
          ng-style="getIndent(category)"> {{category.category_name}}
    </span>
  </li>
</ul>

Currently, I am using different CSS classes to differentiate the types of categories by color. For instance, here is the CSS for the parent badge:

.badge-p {
    background-color: #005DB3;
    color: #f8f8f8;
    cursor: default;
    margin-left: 0px;
}

.badge-p:hover {
    background-color: #116ec4;
    color: #fff;
}

Now, I want to take this design to the next level.

The plan is to add a glyphicon-plus-sign to indicate that a "parent" or "parent and child" category has sub-categories that are currently hidden.

This glyphicon will switch to a glyphicon-minus-sign once the category is clicked and the sub-categories are displayed. It will then revert back to the plus sign when the user clicks to close the category.

This approach allows all categories to be displayed with the same color, improving visual consistency and enhancing usability for the user.

What would be the best way to implement this functionality? Also, is there a generic method (without relying on glyphicons) that could work in case I want to experiment with different icons later on?

EDIT 1: With the guidance from ABr's answer, I have successfully implemented the full functionality using slightly revised HTML structure. The glyphicon was nested within the span of the badge, ensuring proper positioning and size without additional CSS. This implementation covers all category types. Check out the updated plnkr here: http://plnkr.co/edit/19ihMtyJsQwcuLxKhgQh

Answer №1

The simplest method is to incorporate a distinct state (such as category.expand) within your category data. This will enable you to utilize ng-class for toggling the appropriate class.

Include a separate span (for easier alignment of the glyphs) with ng-class: ng-class={{expandGlyphs}}

Subsequently, define the expandGlyphs within your scope in the following manner:

$scope.expandGlyphs = "{
    'glyphicon glyphicon-plus-sign': !category.category_expand && (category.category_type == 'parent' || category.category_type == 'parent and child'), 
    'glyphicon glyphicon-minus-sign': category.category_expand && (category.category_type == 'parent' || category.category_type == 'parent and child')
}"

To properly align the glyphicons with the text, add the following snippet to your CSS:

/*Center Glyph*/
.glyphicon:before {
  vertical-align: text-bottom;
}

An example has been provided for the fruit category - Plnkr

Take note: Given that everything is hardcoded (consider revising your code), it's essential that you replicate the same process for other categories.

If customization is desired, consider creating distinct CSS classes for custom items and assigning them in ng-class instead of using glyphicons. For instance:

.plus-sign:before {
  content: "+";
  font-weight: bold;
  color: red;
}
.minus-sign:before {
  content: "-";
  font-weight: bold;
  color: green;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

AngularJS: ng-show is a directive that allows you to

I'm attempting to toggle the visibility of consecutive divs using ng-show in AngularJS. Below is the code snippet: angularExample.html <!DOCTYPE html> <html ng-app="Fino"> <head> <link rel="stylesheet" type="text/css" hre ...

Tips on aligning two divs vertically within an HTML <li> element, even with content that varies in size, by utilizing nested flexboxes

Every div contains unique content of varying heights. Our approach involves using flexboxes to ensure equal height for each li element. Now, we are facing a challenge with positioning the div class="2" so that their tops align perfectly. We've expe ...

Enhancing readability in a vertical CSS menu with proper spacing

I'm looking to increase the spacing between each menu item as they appear too close together. Can someone help me with managing this? The menu names are currently right under one another, almost touching. What is the best way to create more space betw ...

Switching icon images using JQuery based on state changes

I'm attempting to switch the background image of my webpage's "body" element when the user toggles between playing and pausing music icons. This is what the CSS for the "body" element looks like: body { background: url('https://s3-us-wes ...

Determine the number of properties present in two arrays by comparing them

Looking to compare two arrays and determine the count of items in the master list. A sample master list could be: { name: 'Emily', age: 29 }, { name: 'Jack', age: 31 }, { name: 'Lily', age: 28 }, { name: 'Emily', a ...

Guide on placing an <img> within a navigation bar

I am currently working on a Bootstrap 4 navbar that includes both a logo and text in the navbar-brand section. However, I am facing difficulties in positioning the brand-logo and text accordingly. <!doctype html> <html ...

Sneaky spam and ads embedded within Joomla template

Today, while examining the source code of a Joomla site I am developing, I stumbled upon some hidden links that seem to be spam. I have spent an hour searching through various template files but have been unable to locate them. The hidden links in questio ...

Steps to create an iframe that opens in a new window

I'm facing an issue with the iframe sourced from flickr. My website includes an embedded flickr iframe to showcase a gallery without the hassle of creating a slider, resizing images, and extracting thumbnails. Given that this site belongs to a frien ...

Attempting to place numerous recurrent elements in a fixed position relative to the perspective of the observer

Describing the appearance of my button <a href="website" class="button">Link 1</a> Now, I need to place another set of 4 similar buttons in a horizontal row next to it. <a href="website" class="button">Link 2</a> <a href="webs ...

``I am experiencing issues with the Ajax Loader Gif not functioning properly in both IE

I am brand new to using ajax and attempting to display a loading gif while my page loads. Interestingly, it works perfectly in Firefox, but I cannot get it to show up in Chrome or IE. I have a feeling that I am missing something simple. The code I am using ...

Determine a comparative measurement using specific numerical values

I am currently in the process of creating a webpage and I want to ensure that it is responsive by adjusting certain values based on the width of the viewport. Specifically, I have a DIV element that I want to split into 2 columns. For smaller screens (min ...

Tips for implementing ng-hide/ng-show animations

Is there a way to create an animation on an element in Angular that will be triggered when the item's visibility is changed using ng-hide/ng-show? Which specific CSS classes should be included to ensure smooth animations on elements? ...

Website Responsiveness - inquiries for all needs

My first responsive website project has hit a roadblock, as I struggle to understand how to implement media queries effectively. Here's a snippet of my code... <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/x ...

Vue.js transition-group does not apply the *-move class

As I dive into learning Vue, I find myself wondering if I may have overlooked something fundamental or stumbled upon a bug. Despite multiple readings of the documentation at https://v2.vuejs.org/v2/guide/transitions.html#List-Move-Transitions, I still can& ...

What is the significance of keyframes in CSS animations at different percentages

I'm facing a challenge with the code below that is intended to make objects float from left to right in the background. However, once they go off-screen, a vertical scroll bar appears despite the overflow-y: hidden attribute added to the class. I atte ...

Enhancing the appearance of the content editor with a personalized touch

I am working with a standard content editor that utilizes an iFrame as the text area. Upon changing dropdown options, it triggers the following command: idContent.document.execCommand(cmd,"",opt); Where "idContent" refers to the iFrame. One of the dropd ...

There are multiple sets of radio buttons within nested ng-repeats, but only the final group displays the selected value

I am having an issue with updating a form that contains multiple radio buttons based on data retrieved from an API. The challenge is that only the last set of radio buttons displays the value correctly. Below is the code snippet I am using (angular bracket ...

How can I automatically copy a highlighted link in HTML?

I am attempting to implement a feature where users can click on a link and have it automatically copied. For example, I want it to appear like this: "UPI ID: david@okidfcbank". In this case, the link should be highlighted in blue. This is the code I have ...

Top recommendations for Backand on JSON manipulation and associated entities

I am currently exploring how to set up my Backand application and its REST API. This question pertains to the topic of "Backand deep querying". I am in search of some best practice code examples for executing server-side code that loops through data object ...

Tips for dividing a div into percentages while maintaining a constant width for a div on the left side

I need help with creating a layout that involves 4 boxes. The first box (box1) should have a width of 50px on the left side, while the remaining 3 boxes should fill in the rest of the screen and be resizable. Can someone guide me on achieving this layout? ...