web-dev-qa-db-ja.com

Angularjs bootstrapドロップダウンが機能しない

Angularjsとbootstrapは少し新しいです。

シンプルなドロップダウンを追加しようとしています。しかし、それは機能していません。

@ ブートストラップ3の単純なドロップダウンが機能しない の提案を試してみました。それも機能していません。

<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" ui-sref="a">a<span class="caret"></span></a>
<ul class="dropdown-menu">
  <li><a ui-sref="a">a</a></li>
  <li><a ui-sref="b">b</a></li>
  <li><a ui-sref="c">c</a></li>
  <li><a ui-sref="d">d</a></li>
  <li><a ui-sref="e">e</a></li>
  <li><a ui-sref="f">f</a></li>
  <li><a ui-sref="g">g</a></li>
  <li><a ui-sref="h">h</a></li>
  <li><a ui-sref="i">i</a></li>         
  <li><a ui-sref="j">j</a></li>
  <li><a ui-sref="k">k</a></li>
</ul>
</li>

完全なコード@ http://plnkr.co/edit/uFDFOJfHjL5qY9nVEykq?p=preview

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

javascripthtmlangularjstwitter-bootstrapangular-ui-bootstrap
33
Silent_Pal

アプリにui.bootstrapモジュールを含める必要があります。

var app = angular.module('App', ['ui.router','ui.bootstrap']);

また、ui-srefをドロップダウントリガーから削除します。

<a class="dropdown-toggle" data-toggle="dropdown" >a<span class="caret"></span></a>

Plnkr

33
PSL

注：ここでの回答のほとんどは時代遅れです！主な問題は、dropdownディレクティブがクラスとしては使用できなくなり、属性としてのみ使用可能になり、uib-dropdownに名前が変更されたことです。

私はしばらくここで立ち往生しましたが、クラスを属性に変更することは魅力的でした。

また、各ディレクティブには、プレーン名の代わりに'uib-'プレフィックスを使用する必要があります。

<li uib-dropdown>
    <a uib-dropdown-toggle>a<span class="caret"></span></a>
    <ul uib-dropdown-menu>
        <li><a ui-sref="a">a</a></li>
        <li><a ui-sref="b">b</a></li>
        <li><a ui-sref="c">c</a></li>
        <li><a ui-sref="d">d</a></li>
    </ul>
</li>

（そしてもちろん、アプリにui.bootstrapモジュールを含めることを忘れていないことを確認してください。）

var app = angular.module('App', ['ui.router','ui.bootstrap']);
72
Micros

data-toggle="dropdown"を削除する必要があります。 ui.bootstrapとの競合が生じると思います

<li class="dropdown" uib-dropdown>
            <a aria-expanded="false" aria-haspopup="true" class="dropdown-toggle" uib-dropdown-toggle href="" role="button">
              <span class="glyphicon glyphicon-flag"></span>
              Events
              <span class="caret"></span>
            </a>
            <ul class="uib-dropdown-menu" role="menu">
              <li>
                <a href="">Event 1</a>
              </li>
              <li>
                <a href="">Event 2</a>
              </li>
            </ul>

お役に立てれば。

8
Akash

オン=トグルをアンカータグに追加して、bootstrap dropdown angularドロップダウンクラス、この問題はangle-ui（ https://github.com/angular-ui/bootstrap/issues/2156 ）

5
madhukar547

私は同じ問題を抱えていたので、主題に関する here から素晴らしいリソースを見つけました。以下に私がやったことの概要を説明します。

  1. ダウンロード iブートストラップ
  2. Zipファイルをアプリのターゲットディレクトリに移動し、解凍します
  3. ui bootstrapリリースの最新版を見つけます。これは、私の場合は「bootstrap-gh-pages/ui-bootstrap-tpls-0.13.0.min.js」にあります」
  4. メインの.htmlファイルに縮小されたjsファイルを含めます：<script src='stylesheets/bootstrap-gh-pages/ui-bootstrap-tpls-0.13.0.min.js'></script>
  5. Angular directives に戻り、ドロップダウンセクションまでスクロールします。 JavaScriptをプライマリjsファイルとhtmlサンプルにコピーし、通常どおりカスタマイズします

それが私のためにしたことです。同じ問題を抱えている他の人の助けになることを願っています。

1
Mason

かなり簡単な解決策を（長い間見つけようとした後）解決しました。単に「dropdown-toggle」ディレクティブをボタンに追加します

<button class="btn btn-primary " dropdown-toggle type="button">Drop Me Down<span class="caret"></span></button>
0
cbyte

さて、属性「ドロップダウン」をli要素に追加する必要があることに気付きました。それが追加されると、すべてが正常になります。

<li class="dropdown" dropdown>
   <a href="#" dropdown-toggle role="button" aria-haspopup="true" aria-expanded="false">... <span class="caret"></span></a>
   <ul class="dropdown-menu">
       ...
   </ul>
</li>
0
Olatunde Garuba

まず、アプリにui.bootstrapモジュールが含まれていることを確認してください

var app = angular.module('App', ['other inclusions','ui.bootstrap']);

それでも問題が解決しない場合は、dropdown-toggleとdropdownをディレクティブとして使用しないでください。代わりにクラスとして使用します。つまり、class = 'dropdown-toggle'など。

例えば ​​：

<div class="dropdown dropdown-append-to-body">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle = "dropdown">Dropdown on Body <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
    </ul>
</div>

この問題を参照してください。 https://github.com/angular-ui/bootstrap/issues/2156

0
dCoder

for Angular 2：

  1. npm install ng2-bootstrap --saveを追加します
  2. gITHUBの例に従ってください： https://github.com/valor-software/ng2-bootstrap/tree/development/demo/components/dropdown
0
arn-arn