AngularJS和Bootstrap分割按钮下拉列表

时间:2012-10-21 18:25:00

标签: twitter-bootstrap angularjs angular-ui

你知道是否有人将Bootstrap的脚本移植到AngularJS?

我需要Bootstrap的split button dropdown用于我的应用程序,我真的很想避免使用jQuery。我似乎没有把它谷歌出来。

3 个答案:

答案 0 :(得分:32)

看看这个演示: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>

它只使用一个变量'open',它是真或假。

答案 1 :(得分:10)

作为angular-ui的一部分,我们正在使用纯AngularJS创建bootstrap的小部件(不依赖于第三方JS库,只有依赖是bootstrap的CSS)。

存储库位于此处:https://github.com/angular-ui/bootstrap

这项工作正在进行中,但已经有了dropdown-toggle指令: 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周),因此非常欢迎错误报告/拉取请求!

答案 2 :(得分:2)

您可以尝试使用此指令将angularjs选择框转换为bootstrap的下拉列表:http://jsfiddle.net/M32pj/28/ `样本:

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

`