Angular-UI Tabs: ajouter une classe à un onglet spécifique

Je veux créer les onglets suivants Angulaire de l'INTERFACE utilisateur:

onglets http://gyazo.com/1a0153506b386d4746c108c420f7ae1b.png

Donc, je vais ajouter les styles basés sur Bootstap de noms de classe/balisage:

.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;
}

(Comme vous pouvez le voir j'ai besoin de compenser un rembourrage sur <a> un peu après j'ai ajouté des super-écrit le texte, sinon, il est poussé vers le bas.)

Prochaine, j'ai le balisage suivant & code html/js fichiers:

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 }
  ];

};

Donc, ce qui est à gauche est prise Angulaire ajouter une classe nommée "new" sur le bon élément basé sur tabs définition de tableau ci-dessus. Malheureusement, je n'ai pas réussi à trouver comment.

Comme vous pouvez le voir j'ai essayé ng-class="{new: tab.new}" (en commentaire dans le code html), mais il s'agit essentiellement des pauses toutes les fonctions de classe, la production erronée ng-class atrribute au moment de la visualisation dans les Outils de Dev:

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

Voici la Plunkr.

OriginalL'auteur pavek | 2013-10-16

  1. 6

    @TyndieRock est juste que vous ne pouvez pas, d'autant que je suis au courant, appliquer classes de bootstrap-ui tabs. Toute ng-classe est dépouillé et directement à l'ajout d'une classe causes d'un mauvais comportement et il bloque toute tentative d'injecter dans.

    Je ne vois d'un problème posté sur github demander personnalisés prise en charge de css. Donc peut-être un jour.

    @TyndieRock de la solution de vous rapprocher, mais ne pas obtenir de vous tout le chemin. Félicitations pour trouver tab-heading. Bien que sa syntaxe est juste un peu hors.

    Voici ce que je pense que vous voulez:

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

    Cela vous permettra de définir le style du texte. Mais il ne fonctionne pas si bien pour votre css contenu.

    Vous pouvez faire vos propres onglets. C'est embêtant, mais qui va vous donner le contrôle que vous cherchez.

    On peut le style de la li et de balises qui sont générés, mais pas à l'aide de la ng-classe. Découvrez ma solution stackoverflow.com/a/21092713/968833
    C'est un bon point, que la newish opérateur ternaire œuvres - en notant l'opérateur ternaire a été ajouté à Angulaires 1.1.5. Cette question a été écrit avant que - 1.0.8 - ce n'était pas une option.
    Bon point. A ajouté que l'information à la solution.

    OriginalL'auteur KayakDave

  2. 9

    Je ne suis pas sûr que vous pouvez appliquer ng-classe à onglets comme ça. Après des tentatives et des échecs, j'ai décidé de regarder le bootstrap de l'interface utilisateur de la source pour les onglets et fait une découverte intéressante liées à l'onglet de la rubrique attribut. Apparemment, vous pouvez mettre du html dans le titre de section si vous placez l'onglet en-tête comme un enfant à un onglet de l'élément.

    Découvrez la tabheading directive ici.

    C'est l'exemple qu'ils montrent:

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

    Dans votre cas, je pense que vous pourriez être en mesure de faire quelque chose de ce genre pour obtenir le même effet:

    <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>
    merci pour la bonne direction. Mais KayakDave la réponse de vraiment faire le travail.

    OriginalL'auteur TyndieRock

  3. 6

    Ce problème a été me rend fou, c'est ce que j'ai fait pour avoir onglet personnalisé rubrique style.
    Œuvres Angulaire >= 1.1.5, comme il est le seul à avoir opérateur ternaire dans les expressions.

    On a besoin de cibler les <tab> élément, et pas l'onglet en-tête. Malheureusement ng-classe ne fonctionnera pas et se déchire avec d'autres ng-classe directives à partir des modèles.

    Si vous essayez de cibler l'onglet de l'élément d'en-tête, vous trouverez qu'il ya pas beaucoup que vous pouvez faire avec elle. Il n'y a pas de parent sélecteurs CSS donc il n'y a aucun moyen d'atteindre ce point d'ancrage étiquette où la plupart de l'action se passe.

    Afin d'avoir le cookie et de le manger:
    1) demandez à votre styles cible décroissant balise d'ancrage, qui est généré par bootstrap onglet directive

    2) s'appliquent à la classe à l'aide de cet obscur syntaxe:

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

    Puis, tout fonctionne comme prévu et bon les classes sont ajoutées à la <li> qui est un parent à l'intéressante <a> tag.

    Pour résumer:
    Lorsque ng-classe est défaillante et a l'interpolation des questions, essayer d'être plus direct.

    espère que ça aide quelqu'un.

    Cela fonctionne, mais je pense que ng-classe doit être pris en charge par des onglets :-D.
    Que faire si nous n'avons pas valide-onglet classe? Peut-on utiliser " pour le deuxième cas?
    Avez-vous valide-onglet css?

    OriginalL'auteur stride

  4. 0

    J'ai eu le même problème aujourd'hui et a obtenu autour d'elle dans un peu hacky. Chaque fois que j'ai déterminé qu'un onglet spécifique nécessaire une classe ajoutés/supprimés à partir de cela, j'ai simplement utilisé angulaire sélecteurs de choisir mon onglet, et dynamiquement ajoutés/supprimés classes manuellement.

    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');
}
    C'est quelque chose de directive, pas pour le mettre à l'intérieur d'un contrôleur, parce que vous faites DOM-Sélection, ce qui ne devrait pas être partie de votre vue-contrôleur.

    OriginalL'auteur Swaraj

  5. -1

    Essayez d'ajouter un id de la DIV entourant les onglets, puis de faire vos styles sur cette base.
    Par exemple

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

    Et ici est un style qui fait de l'onglet actif une couleur différente

    #myTabs div li.active a {
  background-color: lightsteelblue;
}
    Cela ne correspond pas à la question, parce qu'il veut appliquer une classe à un onglet de la rubrique pour afficher de Nouveau, si la classe des matchs. Vous êtes juste en utilisant la classe existante de l'onglet actif, mais ce n'est pas la réponse à la question.

    OriginalL'auteur Scott