Я хочу создать следующие вкладки с 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}"
Здесь Плункр.