Вопрос по tabs, classname, angular-ui, twitter-bootstrap, angularjs – Вкладки Angular-UI: добавить класс к определенной вкладке

10

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

вкладки http://gyazo.com/1a0153506b386d4746c108c420f7ae1b.png

Так что я'добавив стили на основе 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></a> через некоторое время после того, как я добавил суперскриптованный текст, в противном случае он будет сдвинут.

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

HTML:

    
        
    


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

Вот'сPlunkr.

Ваш Ответ

5   ответов
6

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

Я видел проблему, опубликованную на 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.

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

Хорошая точка зрения. Добавил эту информацию в решение. stride
@stride It 'Хорошим моментом является то, что новый троичный оператор, работающий с троичным оператором, был добавлен в Angular 1.1.5. Этот вопрос был написан до этого - 1.0.8 - так что это нет вариант тогда. KayakDave
Можно стилизовать сгенерированные теги li и a, но не используя ng-класс. Проверьте мое решение наstackoverflow.com/a/21092713/968833 stride
-1

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

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

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

#myTabs div li.active a {
  background-color: lightsteelblue;
}
Это нене подходит вопрос, потому что он хочетs применить класс к заголовку вкладки для отображения New, если класс соответствует. Вы просто используете существующий класс для активной вкладки, но это не ответ на вопрос. Sebastian
9

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

Проверьте директиву табуляции вВот.

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

<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's 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>
спасибо за указание правильного направления. Но KayakDave 'Ответ действительно сделал работу. pavek
0

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

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');
}
Это что-то для директивы, а не для помещения ее в контроллер, потому что вы делаете DOM-Selection, который не долженбыть частью вашего контроллера представления. Sebastian
6

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

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

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

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

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

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

Тогда все работает как положено, и соответствующие классы добавляются в

 это родитель интересного<a></a> тег.

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

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

Что если у нас есть только класс недопустимых вкладок? Можем ли мы использовать для второго случая? Naomi
У вас есть css-вкладка? Naomi
Это работает, но я думаю, что ng-класс должен поддерживаться вкладками :-D. Sebastian

Похожие вопросы