11

誰かが Bootstrap のスクリプトを AngularJS に移植したかどうか知っていますか?

アプリにBootstrap の分割ボタン ドロップダウンが必要で、jQuery を取り込むのは避けたいと思っています。

4

3 に答える 3

33

このデモを見てください: http://jsfiddle.net/guillaumebiton/8muRC/

Angular のパワーのみ:

<div class="btn-group" ng-class='{open: open}'>
    <button class="btn">Action</button>
    <button class="btn dropdown-toggle" data-toggle="dropdown" ng-click='open=!open'>
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li class="divider"></li>
        <li><a href="#">Separated link</a></li>
    </ul>
</div>

true または false である 1 つの変数「open」のみを使用します。

于 2012-10-31T12:47:16.533 に答える
10

angular-ui の一部として、ブートストラップのウィジェットを純粋な AngularJS で作成する作業を行っています (サード パーティの JS ライブラリには依存せず、依存関係はブートストラップの CSS のみです)。

リポジトリは次の場所にあります: https://github.com/angular-ui/bootstrap

これは非常に進行中の作業ですが、既にドロップダウン トグル ディレクティブがあります: https://github.com/angular-ui/bootstrap/blob/master/src/dropdownToggle/dropdownToggle.js

次のように使用できます。

<div ng-controller="MyCtrl">
  <div class="btn-group">
      <a class="btn dropdown-toggle">
        Actions
        <span class="caret"></span>
      </a>
      <ul class="dropdown-menu">
          <li><a>Action 1</a></li>
          <li><a>Action 2</a></li>
      </ul>
  </div>
</div>

このディレクティブはクラス レベルで動作するため、クラスを追加するだけで動作することに注意してくださいdropdown-toggle。

繰り返しになりますが、これは進行中の作業です (全体の作業は 2 ～ 3 週間前に開始されました) ので、バグ レポートやプル リクエストは大歓迎です!

于 2012-10-21T18:50:44.520 に答える
2

angularjs 選択ボックスをブートストラップのドロップダウンに変換するこのディレクティブを試すことができます: http://jsfiddle.net/M32pj/28/ `サンプル:

<select ng-model="example1" bs-selectbox>
 <option value="1">One</option>
 <option value="2">Two</option>
</select>

`

于 2013-03-20T15:54:15.043 に答える