23

angularjs ブートストラップ タブセット タブ見出し内に html を記述できるかどうか疑問に思っています。タイトル内にsvgを追加しようとしています。私が抱えている問題を試して実証するために、plunker で簡単なスニペットを作成しました。

<tabset>
  <tab heading="<span>hello</span><em>1</em>">One</tab>
  <tab heading="Two">Two</tab>
  <tab heading="Three">Three</tab>
</tabset>

http://plnkr.co/edit/qFsFGDNUIJj9nIF51ApU

何か案は？

ありがとう

4

5 に答える 5

47

アンギュラー ブートストラップ v0.14+

Angular Bootstrap v0.14では、以前に提供されたほとんどのコントロールに新しいプレフィックスが導入されました。以下の元の回答は引き続き適用されますが、新しいタグ名、、、およびを使用する必要がuib-tabsetありuib-tabますuib-tab-heading。

<uib-tabset>
  <uib-tab>
    <uib-tab-heading>
      <span>hello</span><em>1</em>
    </uib-tab-heading>
    One
  </uib-tab>
  <uib-tab heading="Two">Two</uib-tab>
  <uib-tab heading="Three">Three</uib-tab>
</uib-tabset>

Angular Bootstrap < v0.14

見出し内に HTML が必要な場合は、tab-heading要素内で要素を使用する必要があります ( docsの例に示すように)。tab

<tabset>
  <tab>
    <tab-heading>
      <span>hello</span><em>1</em>
    </tab-heading>
    One
  </tab>
  <tab heading="Two">Two</tab>
  <tab heading="Three">Three</tab>
</tabset>

ここでプランカーを更新しました。

于 2014-09-29T19:47:56.277 に答える
5

2016年以降

バージョン(2015.10.09)のタブはプレフィックスを使用するため、受け入れられた答えはui-bootstrap beforeには問題ありません。version 0.14.00.14.0 uib-

変更履歴を見る

したがって、すべてのタグをuib-プレフィックスに置き換える必要があります

<uib-tabset>
  <uib-tab>
    <uib-tab-heading>
      <span>hello</span><em>1</em>
    </uib-tab-heading>
    One
  </uib-tab>
  <uib-tab heading="Two">Two</uib-tab>
  <uib-tab heading="Three">Three</uib-tab>
</uib-tabset>
于 2016-10-24T07:19:06.547 に答える
-1 

            <li heading="Status" class="ng-isolate-scope var" ng-model="(var = 'active: active')" >
                <a href="/ibox">Status1</a>
            </li>


            <li heading="Status" class="ng-isolate-scope var" ng-model="var = 'active: active'">
                <a href="/netapp">Status</a>
            </li>


    </tabset>
于 2015-04-29T18:22:33.147 に答える