Выпадающие кнопки AngularJS и Bootstrap

Ответ 1

Посмотрите на эту демонстрацию: 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", которая является истиной или ложью.

Ответ 2

В рамках angular -ui мы работаем над созданием виджетов bootstrap в чистом AngularJS (без зависимостей от сторонних 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 недели назад), так что сообщения об ошибках/запросы на передачу приветствуются!

Ответ 3

Вы можете попытаться использовать эту директиву, которая преобразует поле выбора углов в окно выгрузки: http://jsfiddle.net/M32pj/28/ Пример:

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

`