Angular -UI Вкладки: добавьте класс в определенную вкладку

Я хочу создать следующие вкладки с Angular UI:

_{(источник: gyazo.com)}

Итак, я добавляю стили на основе имен классов/разметки Bootstap:

.nav-tabs > li.new > a {
  padding-top: 5px;
}
.nav-tabs > .new > a:after {
  content: "NEW";
  color: indianred;
  font-size: 10px;
  vertical-align: super;
  padding-left: 2px;
}

(Как вы видите, мне нужно немного компенсировать заполнение <a> после того, как я добавил суперскриптовый текст, в противном случае он будет сдвинут).

Далее у меня есть следующая разметка & код в файлах html/js:

HTML:
<tabset>
    <tab ng-repeat="tab in tabs" heading="{{ tab.title }}" active="tab.active" ><!-- ng-class="{new: tab.new}"-->
        <div ng-include="tab.page"></div>
    </tab>
</tabset>

JS:
var TabsDemoCtrl = function ($scope) {
  $scope.tabs = [
    { title:"Tab 1", content:"Dynamic content 1" },
    { title:"Tab 2", content:"Dynamic content 2", active: true, 'new': true }
  ];

};

Итак, осталось сделать Angular добавить класс с именем "new" к правильному элементу на основе определения массива tabs выше. К сожалению, я не смог понять, как.

Как вы можете видеть, я пробовал ng-class="{new: tab.new}" (прокомментировал в html-коде), но это существенно нарушает все возможности класса, приводя к некорректному атрибуту ng-class при просмотре его в Dev Tools:

ng-class="{new: tab.new} {active: active, disabled: disabled}"

Здесь Плункр.

Ответ 1

@TyndieRock прав, если вы не можете, насколько мне известно, применять классы к вкладкам bootstrap-ui. Любой ng-класс лишается и прямое добавление класса вызывает плохое поведение, и он блокирует любую попытку ввода в него.

Я видел проблему, опубликованную в github, которая запрашивала пользовательскую поддержку css. Так может быть, когда-нибудь.

Решение @TyndieRock приближает вас, но не доводит вас до конца. Престижность поиска tab-heading. Хотя его синтаксис просто немного выключен.

Вот что, я думаю, вам нужно:

 <tabset>
    <tab ng-repeat="tab in tabs">
    <tab-heading ng-class="{new:tab.new}">{{tab.title}}</tab-heading>
        <div ng-include="tab.page"></div>
    </tab>
</tabset>

Это позволит стилизовать текст. Но это не так хорошо работает для вашего содержимого css.

Возможно, вы захотите сделать свои собственные вкладки. Это хлопот, но это даст вам контроль, который вы ищете.

Ответ 2

Я не уверен, что вы можете применить ng-class к таким вкладкам. После попытки и неудачи я решил посмотреть источник bootstrap-ui для вкладок и сделал интересное открытие, связанное с атрибутом заголовка табуляции. Очевидно, вы можете поместить html в раздел заголовка, если вы поместите заголовок табуляции в качестве дочернего элемента в элемент табуляции.

Ознакомьтесь с директивой tabheading в здесь.

Вот пример, который они показывают:

<tabset>
  <tab>
    <tab-heading><b>HTML</b> in my titles?!</tab-heading>
    And some content, too!
  </tab>
  <tab>
    <tab-heading><i class="icon-heart"></i> Icon heading?!?</tab-heading>
    That right.
  </tab>
</tabset>

В вашем случае я думаю, что вы можете сделать что-то подобное, чтобы получить тот же эффект:

<tab ng-repeat="tab in tabs" active="tab.active">
    <tab-heading>{{tab.title}} <span ng-show="tab.new">new</span></tab-heading>
    <div ng-include="tab.page"></div>
</tab>

Ответ 3

Эта проблема сводило меня с ума, так что вот что я сделал, чтобы настроить стиль заголовка табуляции. Работает для Angular >= 1.1.5, так как он единственный, кто имеет тернарный оператор в выражениях.

Нужно настроить таргетинг на элемент <tab>, а не на заголовок табуляции. Unfortunatelly ng-class не будет работать и будет искажен вместе с другими директивами ng-класса из шаблонов.

Если вы попытаетесь настроить таргетинг на элемент заголовка вкладки, вы обнаружите, что с ним мало что можно сделать. В CSS нет родительских селекторов, поэтому невозможно найти этот тег привязки, где выполняется большая часть действия.

Итак, чтобы печенье и съесть его: 1) у ваших стилей целевой нисходящий тег привязки, который создается с помощью директивы tabstrap tab

2) примените класс, используя этот неясный синтаксис:

 <tabset>
        <tab class="{{orderForm.detailsForm.$invalid ? 'invalid-tab' : 'valid-tab'}}">
            <div>CONTENT</div>
</tab>
</tabset>

Затем все работает так, как ожидалось, и соответствующие классы добавляются в <li>, который является родителем для интересного тега <a>.

Подводя итог: Когда ng-класс ошибочно работает и имеет проблемы с интерполяцией, попробуйте быть более прямым.

Надеюсь, что это поможет кому-то.

Ответ 4

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

HTML
<tab class="errorTab" heading='error' active='explorer.hasError'>
  <div error-message class='errorTabSectionOuter'></div>
</tab>

JS
var errorTab = angular.element('.errorTab');
if($scope.explorer.hasError){
  errorTab.addClass('showErrorTabClass');
  errorTab.removeClass('hideErrorTabClass');
}
else{
  errorTab.addClass('hideErrorTabClass');
  errorTab.removeClass('showErrorTabClass');
}

Ответ 5

Попробуйте добавить идентификатор к DIV, окружающий вкладки, а затем создайте свои стили на основе этого. Например

<div id="myTabs">
 <tabset>.....</tabset>
</div>

И вот стиль, который делает активную вкладку другим цветом

#myTabs div li.active a {
  background-color: lightsteelblue;
}