Как разместить глификон внутри значка начальной загрузки

Question

Я медленно создавал способ отображения иерархических данных с использованием значков начальной загрузки и AngularJS. Я пытаюсь разрешить людям просматривать категории, чтобы найти любую категорию, которую они ищут.

Есть 3 общие типы категорий:

родитель - категория верхнего уровня

родитель и ребенок - ребенок категории со своими подразделами

ребенок - нижний уровень категории ребенка, без подкатегорий

До сих пор, при значительной помощи от вас, Stackoverflowers, у меня есть довольно приятная версия, которая вы можете увидеть здесь:

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

Вот соответствующий HTML-код:

<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> 

В настоящее время я использую различные классы CSS для отображения каждого типа с различным цветным значком. Например, ниже является CSS используется для родительского знака:

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

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

Теперь я хочу, чтобы сделать все это немного более классным.

Планируется добавить знак glyphicon-plus-sign в левую сторону значка категорий «parent» и «parent and child», что означает, что для этой категории существуют подкатегории, которые еще не созданы открыт.

Этот знак будет изменен на знак glyphicon-minus при нажатии категории и подкатегорий. Затем он снова вернется к знаку глификон плюс, когда открытая категория будет нажата снова и закрыта.

Таким образом, все категории будут отображаться одного цвета, что упростит работу на глазу и, конечно же, сделает все это более интуитивно понятным для пользователя.

Каков наилучший способ для этого? Кроме того, есть общий не-glyphicon способ сделать это - я, возможно, захочется поэкспериментировать с другими значками для этих символов, в-случае, если glyphicons не смотрят величайшая ....

EDIT 1: Я собрал полностью рабочую версию, используя ответ ABr, с немного отличающимся HTML - глификон был помещен в промежуток в промежутке значка. Это помогло правильному размещению текста и размерам в значке без необходимости в дополнительном CSS. Функциональность была реализована для всех категорий .... Вот что такое plnkr: http://plnkr.co/edit/19ihMtyJsQwcuLxKhgQh

Answer 1

Самый простой способ - добавить отдельное состояние (я использовал category.expand) в данные вашей категории. Затем вы можете использовать ng-класс для переключения нужного класса.

Добавить Seperate (для выравнивания глифов немного легче) промежуток с нг-класса: ng-class={{expandGlyphs}}

Затем определяют expandGlyphs в Вашей области следующим образом:

$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') 
}" 

Чтобы выровнять glyphicons в текст добавьте следующие строки в CSS:

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

Я сделал пример для категории фруктов - Plnkr

Примечание 1: Поскольку у вас есть все жестко закодированное (я бы предложил вам немного переписать код), вам решать сделать то же самое для других категорий.

Если вы хотите иметь пользовательские элементы, вы можете подумать о добавлении отдельных классов CSS и назначить их в ng-классе вместо глификонов. Например.

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