AngularJS和Bootstrap的拆分按鈕下拉

你知道是否有人將Bootstrap的腳本移植到AngularJS上嗎？AngularJS和Bootstrap的拆分按鈕下拉

我需要Bootstrap的split button dropdown爲我的應用程序，我真的想避免拉扯jQuery。我似乎無法谷歌這一點。

2012-10-21 minder

看看這個演示：http://jsfiddle.net/guillaumebiton/8muRC/

只有的角功率：

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

它只能使用一個變量「開放」，這是真的還是假的。

來源

2012-10-31 12:47:16 Guillaume

太容易了！ o_O我一定很累，）謝謝！ – minder

是的，這確實顯示了聲明式AngularJS UI的強大功能。但在這種特殊情況下，當我們點擊外部下拉菜單時，原始Boostrap的版本會關閉下拉菜單。它仍然可以在純AngularJS中完成，但是一個小的指令在這裏開始有意義。 –

不錯的解決方案！ :) 事實上，@ pkozlowski.opensource是正確的，它不會在外部點擊時自動關閉。 – Sikian

作爲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-21 18:50:44

這個指令行動的範例：http://jsfiddle.net/eX4aH/13/ –

這似乎被打破了？一直在做一些研究，嘗試不同的版本等，但無濟於事，這個組件的狀態如何？ – Joakim

@ pkozlowski.opensource那小提琴似乎沒有工作了... – ken

您可以嘗試使用這個指令，它轉換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-20 15:54:15 Andy

AngularJS和Bootstrap的拆分按鈕下拉

回答

相關問題