10

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

};

したがって、残っているのは、上記の配列定義"new"に基づいて、Angular に正しい要素に名前を付けたクラスを追加させることです。tabs残念ながら、私はその方法を理解できませんでした。

ご覧のとおり、試してみましたがng-class="{new: tab.new}"(html コードでコメントされています)、これは基本的にすべてのクラス機能を壊しng-class、Dev Tools で表示すると正しくない属性が生成されます。

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

これがPlunkrです。

4

5 に答える 5

9

そのようなタブに ng-class を適用できるかどうかはわかりません。試行錯誤した後、タブの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>
于 2013-10-16T03:19:44.353 に答える
6

@TyndieRockは、私が知る限り、クラスをbootstrap-uiタブに適用できないというのは正しいです。すべての ng-class が取り除かれ、クラスを直接追加すると悪い動作が発生し、それに注入しようとする試みがブロックされます。

カスタム css サポートを求める問題が github に投稿されているのを見ました。だから、いつか。

@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 コンテンツではうまく機能しません。

独自のカスタム タブを作成することもできます。面倒ですが、これにより、探しているコントロールが得られます。

于 2013-10-16T03:59:17.250 に答える
6

この問題は私を怒らせていたので、カスタムタブ見出しのスタイルを設定するために私がしたことは次のとおりです。 Angular >= 1.1.5 で機能します。式に三項演算子があるのは Angular だけです。

<tab>タブの見出しではなく、要素をターゲットにする必要があります。残念ながら、ng-class は機能せず、テンプレートの他の ng-class ディレクティブと一緒に壊れてしまいます。

タブ見出し要素をターゲットにしようとすると、それでできることはあまりないことがわかります。CSS には親セレクターがないため、ほとんどのアクションが実行されているアンカー タグに到達する方法はありません。

したがって、クッキーを取得して食べるには: 1) ブートストラップ タブ ディレクティブによって生成される降順のアンカー タグをスタイルにターゲットにします。

2) このあいまいな構文を使用してクラスを適用します。

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

その後、すべてが期待どおりに機能し、適切なクラスが<li>興味深い<a>タグの親であるに追加されます。

要約すると: ng-class が正しく動作せず、補間の問題がある場合は、より直接的になるようにしてください。

それが誰かを助けることを願っています。

于 2014-01-13T13:40:15.147 に答える
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');
}
于 2013-11-27T21:30:21.387 に答える
-1

タブを囲む DIV に ID を追加して、それに基づいてスタイルを作成してみてください。例えば

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

そして、これはアクティブなタブを別の色にするスタイルです

#myTabs div li.active a {
  background-color: lightsteelblue;
}
于 2014-06-30T20:49:02.527 に答える