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的拆分按钮下拉

回答

相关问题